1

我试图让一个 div 悬停时显示隐藏的 h2 + P（使用 CSS），我希望整个 div（包括 h2 + p）可以链接到 X。

到目前为止，我设法使其工作的唯一方法是使 A 包装所有内容，但这当然只有 HTML5 有效，因此某些浏览器 (IE) 不会喜欢它。

<a href="#">
 <div class="one">
    <img src="#">
    <p>one</p>
 </div>
</a>

我也不能单独给每个块一个单独的块，<a>因为我想改变悬停时的颜色，所以整个 div 需要是可悬停的。即使我那样做，肯定给一个帖子摘录（<P>）肯定会对seo不利吗？

本质上，这就是我想要的最终结果：

<div class="one"> <img src"#"> <p>test</p> <a href="#" class="special"></a> </div>

在一个：悬停，让整个 div 成为一个链接（href="#"）。

一定有办法做到这一点！

4

1 回答 1

0

将链接和内容都包装在 DIV 中：

<div class="wrapper">
  <a href="#"></a>
  <div class="one">
     <img src="#">
     <p>one</p>
  </div>
</div>

使其相对，然后在顶部放置一个跨越整个内容区域的透明链接：

.wrapper a{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: transparent;
}

.wrapper a:hover{
  border: 1px solid #d33;  
}

.wrapper{
  position: relative;
  border: 1px solid #ccc;
}

有点难看，但我没有看到没有 js 的任何其他选择:)

于 2013-01-22T22:30:11.023 回答