1

次のコードを持つ2つのクラスがあります-

<div class="arrow-left"> <h1> < </h1> </div>
<div class="arrow-right"><h1> > </h1> </div>

彼らのスタイル-

.arrow-left{
position: fixed;
top:40%;
left:10%;
vertical-align: middle;
height:80%;width:5%;
text-align: center;
}
.arrow-right{
position: fixed;
top:40%;
right:10%;
vertical-align: middle;
height:80%;width:5%;
text-align: center;
}
.arrow-left:hover, .arrow-right:hover{
background-color: #4EB30B;
cursor:pointer;
}

それらはナビゲーション目的で使用されます。
.arrow-leftにカーソルを合わせると、背景は変更されませんが、.arrow-rightにカーソルを合わせると、背景が変更されます。そして、.arrow-rightをクリックし、.arrow-leftにカーソルを合わせると、背景が変わります。
これは、UbuntuのChromeで発生しています。 これがなぜこれが起こるのか知りたいウェブページ
ですが、回避策は必要ありません。

4

2 に答える 2

3

これは、矢印の配置が原因です。例では、左矢印のホバーは、マウスが左矢印の約150ピクセル下にあるときに機能します。幅と高さをピクセル単位で指定して、ホバーが次の場合にのみ機能するようにする必要があります。本当にボックスをホバリングします

さらに、div.b-wrap左矢印ボックスの上にあるプロパティを使用しますz-index

于 2013-01-18T11:55:47.547 に答える
1

z-index:100に追加.arrow-left

于 2013-01-18T11:55:57.880 に答える