使用悬停和链接使 DIV 工作

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 inside 添加到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>