与悬停和链接一起工作

Question

我正在尝试制作一个div，当您悬停时会改变行为（反转背景和徽标的颜色），并且也是链接。

我设法使这两种行为（充当链接和倒转颜色）正确地工作，但只能独立工作 - 我不能让两者一起工作。

我怀疑这是因为跨度标签是链接的，但不能确定：

.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>