Question

我正在尝试创建一个div，它会在您悬停时更改行为（反转背景和徽标的颜色），也是一个链接。

我已经设法让这两个行为（充当链接和反转颜色）正常工作，但只能独立 - 我不能让两者一起工作。

我怀疑这是因为span标记构成了链接，但无法确定：

.full_box a span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1
}

您可以在此处查看我的代码：https://jsfiddle.net/omcoombs/4pbpto2z/

提前致谢

Answer 1

如果您在div元素中添加a 元素，它将会有效。例如：

.big-box {  
  background: cyan;
  border: 1px solid black;
  height: 200px;
  width: 100px;
}

.big-box a {
  border: none;
  margin: 0;
  padding: 0;
}

.small-box {
  background: white;
  height: 100px;
  width: 100%;
}

.small-box:hover {
  background: red;
}

<div class="big-box">
  <a href="about:blank">
    <div class="small-box">
      logo or sg
    </div>
  </a>
</div>

使用悬停和链接使DIV工作

1 个答案: