2

私のページの1つで、jqueryを使用して、ホバーしたときにナビゲーションバーボタンをアニメーション化しましたが、そうすると、その下のdivが邪魔にならないように押し出され、レイアウトが台無しになります-ボタンを許可することは可能ですか?移動したり、レイアウトに影響を与えたりせずに、div をアニメーション化して交差させますか?

http://www.omnicraftservers.com/images/problem.png

私は一般的にウェブデザインにかなり慣れていないので、ここでいくつかの大きな間違いを犯している可能性があります-それらを指摘してください!

リスト要素の jquery:

<script> 
$(document).ready(function()
{
  $("ul li").mouseenter(function()
  {
    $(this).animate({height:'100px',opacity:'1'},200);
  });
  $("ul li").mouseleave(function()
  {
    $(this).animate({height:'110px',opacity:'0.9'},100);
    $(this).animate({height:'30px',opacity:'0.9'},200);
  });
});
</script>

リスト要素の CSS:

ul li
{
clear:right;
position:relative;
float:left;
width:100px;
height:auto;
display:inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-      stop(0%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.4)));
border:1px solid rgba(0, 0, 0, 0.5);
border-bottom-left-radius:11px;
border-bottom-right-radius:11px;

text-align:center;
text-shadow: 1px 1px rgba(0,0,0,0.9);
font-family: 'Abril Fatface', cursive;
font-size: 20px;

z-index:20;

}

そして、これが役立つ場合は、問題のある外側の div 要素の css:

.panel
{
position:relative;
margin-left:auto;
margin-right:auto;
margin-bottom:5px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(50,50,50,0.7)), color-stop(100%,rgba(0,0,0,0.8)));
border:1px solid rgba(0, 0, 0, 0.5);
width:1148px;
height:185px;
border-radius:11px;
padding:10px;
z-index:0;
}

これが実行可能な回答に十分な情報であることを願っています-どんな助けでも本当に感謝しています!

4

1 に答える 1

1

「ヘッダーナビゲーション要素」を絶対位置に配置する必要があります。これは、ドキュメント内の他の要素の位置には影響しません。

于 2013-05-25T12:20:28.663 に答える