Question

当div元素悬停时，CSS中是否可以更改img src？

<a class="template-image" href="/template-1978944/editor">
 <div class="green"></div>
 <div class="red"></div>
 <div class="orange"></div>
 <img src="/1978944/cover_small.jpg">
</a>

我试过

a.template-image[href^="/template-1978944"] div.green:hover ~ img {
 content: url(/1978943/cover_small.jpg);"
}

a.template-image[href^="/template-1978944"] div.red:hover ~ img {
 content: url(/1978942/cover_small.jpg);"
}

但是没有用:(

Answer 1

您可以使用url的{{1}}来尝试一些解决方法：

background-image

.orange {
  height:50px;
  background:orange;
}
.img {
  width:400px;
  height:200px;
}
.orange:hover + .img {
  background-image:url(https://lorempixel.com/400/300/)!important;
}

您还可以创建使用伪元素更改<div class="orange">Hover me!</div> <div class="img" style="background-image:url(https://lorempixel.com/400/200/)"></div>的错觉，而无需更改标记（您只需根据代码调整用于正确定位新图像的CSS ）

src

.container > div {
  display: inline-block;
  height: 50px;
  width: 50px;
}

.container {
  position: relative;
}

.orange {
  background: orange;
}

.red {
  background: red;
}

.green {
  background: green;
}

.orange:hover~img,
.red:hover~img,
.green:hover~img {
  visibility: hidden;
}

.orange:hover::after {
  content: url(https://lorempixel.com/400/200/);
  position: absolute;
  top: 50px;
  left: 0;
}

.red:hover::after {
  content: url(https://lorempixel.com/400/220/);
  position: absolute;
  top: 50px;
  left: 0;
}

.green:hover::after {
  content: url(https://lorempixel.com/400/300/);
  position: absolute;
  top: 50px;
  left: 0;
}

Answer 2

仅使用CSS悬停元素时无法更改图像src属性。

然而，可以在CSS中的另一个元素悬停时更改元素的 background-image 属性。如果您愿意使用带有背景而不是<div>元素的<img>元素，则会产生相同的效果。

可以使用 general sibling combinator (~) 来完成此操作，如下所示：

.image {
  height: 100px;
  width: 100px;
  background-image: url('http://via.placeholder.com/100');
}

.green:hover ~ .image {
  background-image: url('http://via.placeholder.com/100/00ff00');
}

.red:hover ~ .image {
  background-image: url('http://via.placeholder.com/100/ff0000');
}

.orange:hover ~ .image {
  background-image: url('http://via.placeholder.com/100/ffa500');
}

<a class="template-image" href="/template-1978944/editor">
  <div class="green">Green</div>
  <div class="red">Red</div>
  <div class="orange">Orange</div>
  <div class="image"></div>
</a>

如果您无法更新HTML，则会被迫依赖 JavaScript 解决方案。这可以通过首先使用 getElementsByTagName() 选择图像，然后添加在 .onmouseover <期间更新图像的.src的函数来完成/ strong>其他元素。

这可以在以下内容中看到：

let image = document.getElementsByTagName('img')[0]; document.getElementsByClassName('green')[0].onmouseover = function() { image.src = 'http://via.placeholder.com/100/00ff00'; }; document.getElementsByClassName('red')[0].onmouseover = function() { image.src = 'http://via.placeholder.com/100/ff0000'; }; document.getElementsByClassName('orange')[0].onmouseover = function() { image.src = 'http://via.placeholder.com/100/ffa500'; };

<a class="template-image" href="/template-1978944/editor"> <div class="green">Green</div> <div class="red">Red</div> <div class="orange">Orange</div> <img src="http://via.placeholder.com/100"> </a>

Answer 3

你几乎拥有它。更改内容＆＃39;到了＆＃39;背景＆＃39;并为图像使用透明图像src

＆＃13;

a.template-image[href^="/template-1978944"] div.green:hover ~ img {
 content: url(http://lorempixel.com/100/100/sports/);"
}

a.template-image[href^="/template-1978944"] div.orange:hover ~ img {
 content: url(http://lorempixel.com/100/100/cats/);"
}

a.template-image[href^="/template-1978944"] div.red:hover ~ img {
 content: url(http://lorempixel.com/100/100/nature/);"
}

＆＃13;

<a class="template-image" href="/template-1978944/editor">
 <div class="green">GREEN</div>
 <div class="red">RED</div>
 <div class="orange">ORANGE</div>
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
</a>

＆＃13;

更新：如果您需要原始图像，请将图像用作默认背景。

是否可以通过CSS将鼠标悬停在另一个元素上来更改img src

3 个答案: