Question

我想在链接悬停时更改主体（或我的部分）的背景图像，如本例所示：

http://www.passion-pictures.com/paris/directors/

没有使用JS的方法吗？

我只知道如何编写HTML / CSS

编辑：

当我将鼠标悬停在第一个链接（Michelle）上时，它将按预期更改我的部分的背景。但是，当我将鼠标悬停在第二个链接（Franck）上时，第二个链接背景的顶部开始于我的第一个链接之下。因此，默认背景的顶部仍然可见。我的链接垂直显示

Answer 1

可能，但是会有太多的HTML代码和CSS解决方法。

如果您仍然只想使用CSS，则请参考以下代码-change css background on hover

HTML代码

<div class=container>
  <div class="link">
    <a href="#" class="bg1">bg1</a>
    <div class=background></div>
    <a href="#" class="bg2">bg2</a>
    <div class=background><div>
  </div>
</div>

CSS代码

div.link > a {
  displya: inline-block !important;
  position: relative !important;
  z-index: 5;
}

.bg1:hover + .background {
  background: red;
}

.bg2:hover + .background {
  background: green;
}

.background {
  background: transparent;
  position: absolute;
  width:100%;
  height: 100%;
  top:0;
  left: 0;
}

这会给您实现的想法，但我建议您使用JS，这是一种更好的实现方式。

Answer 2

希望这可能对您有帮助

HTML

<div class="container">
    <a href="#" class="bg1">bg1</a>
</div>

CSS

.bg1:hover::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  background: red;
  width: 100%;
  height: 100%;
  z-index: -1; /* index would get changed based on your need */
}

在不使用任何JS的情况下更改链接悬停时的背景图片

2 个答案: