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

您没有尝试使用cursor:pointercss for .boxWrapper:hovercss 选择器吗？您还可以删除锚标记，并使用onclickdiv 的事件来重定向用户。

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

您可以修改它以使您的其他悬停效果回到 div 而不是锚点上。希望这可以帮助。

于 2012-12-11T21:51:43.500 回答