html - 有什么方法可以在悬停时更改图像同时还充当链接？

Question

我试过这个...

.home {
width: 100px;
height: 100px;
background-image: url("---");
}
.home:hover {
background-image: url("xxx");
}
</style>

<a href="link"><div class="home"></a>

...图像在悬停时发生变化，但单击时链接不起作用。

标签： htmlcss

Answer 1

是的，你可以改变background-image。:hover

.bg_link {
  display: block;
  height: 200px;
  background: url(https://dummyimage.com/600x400/000/000000) center/cover;
}

.bg_link:hover {
  background: url(https://dummyimage.com/600x400/d145d1/d145d1) center/cover;
}

<a class="bg_link" href="https://www.google.com/" target="_blank">
  
</a>