0

IEで奇妙な問題が発生しています。基本的に、実際にコンテンツをリンクでラップせずに、ボックス内のすべてのコンテンツにカーソルを合わせるリンクを作成したいと考えています。IE 以外のすべてのブラウザで、この手法は機能しているようです。IE にカーソルを合わせると、テキストにカーソルを合わせると問題が発生します。ホバーを失い、マウスがテキストで満たされていない領域にある場合にのみホバー効果を実行します。私のサイトのボックスにも画像がありますが、簡単にするために例から削除しました。これはダウンした IE10 でも発生するため、個々のブラウザーの問題ではありません。

私の例では、マウスを側面から h3 テキストまたは p タグ テキストに持ってくると、リンクの上にマウスが移動しませんが、空白の領域にマウスを移動すると、テキストの上にホバー。

HTML

  <div class="boxWrapper">
   <a href="/"></a>
   <h3>Title Goes Here</h3>
   <p>Content of box goes here</p>
  </div>

CSS

.boxWrapper {background:green;}
a {position: absolute; height: 45px; width: 100%; z-index: 5; background: transparent; display:block;}
a:hover {background:rgba(255,255,255,.3)}
h3 {background:#aaa;}
a:hover~h3 {background: #565659; position: relative; z-index: 1;}
p {font-size: 18px; line-height: 26px; color: #6d6e71; position: relative; z-index: 1;}

jsfiddle http://jsfiddle.net/NZuK6/のコード例を次に示します。

4

1 に答える 1

0

css セレクターのcursor:pointercss を使用してみませんでしたか? .boxWrapper:hoverアンカー タグを削除しonclick、div のイベントを使用してユーザーをリダイレクトすることもできます。

http://jsfiddle.net/NZuK6/1/

これを変更して、他のホバー効果をアンカーではなく div に戻すことができます。お役に立てれば。

于 2012-12-11T21:51:43.500 に答える