Question

我对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/

Answer 1

您是否尝试将cursor:pointer css用于.boxWrapper:hover css选择器？您还可以删除锚标记，并使用div的onclick事件来重定向用户。

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

你可以修改它以使你的其他悬停效果在div而不是锚点上恢复原位。希望这会有所帮助。

CSS IE hoverstate问题

1 个答案: