Html 更改<；img>；通过将鼠标悬停在“其他”按钮上来创建元素<；img>；

正如我在标题中所说，我想通过悬停另一个img来更改一个img。我将悬停的第一个img将被称为“voir加mini-img-avant”，第二个img将被称为“voir加img-avant”

以下是我的html代码：

<div class="voir-plus-container">
    <div class="voir-plus-mini-img">
        <img src="file:///C:/HTML/vente-de-guitares/guitare-img/guitare.jpg" class="voir-plus-mini-img-avant">
    </div>
    <div class="voir-plus-image">
        <img src="file:///C:/HTML/vente-de-guitares/guitare-img/guitare.jpg" class="voir-plus-img-avant">
    </div>
</div>

所以当你悬停在“voir plus mini img avant”上时，“voir plus img avant”会被显示为一个块。正常情况下，“voir加img先锋”不会显示。我通过研究发现~是指你想通过悬停一个来对另一个进行操作。但它不起作用：(

所以如果你能帮我，那就太好了：）

Ps：我不能把第一张图片放到另一个大分区，因为这两张图片的大小和内容都不一样。

试试这个：

.voir-plus-container .voir-plus-image,
.voir-plus-container:hover .voir-plus-mini-img {
    display: none;
}

.voir-plus-container:hover .voir-plus-image {
    display: block;
}

---

默认情况下，

div.voir-plus-image

将被隐藏，悬停时它将被显示，并且

div.voir-plus-mini-img

将被隐藏。

css

+

选择器选择紧跟在另一个元素之后的所有元素。如果元素顺序不变，此解决方案可能适合您：

.voir-plus-image > .voir-plus-img-avant {
  display: none;
}

.voir-plus-mini-img:hover + .voir-plus-image > .voir-plus-img-avant  {
  display: block;
}

请参见演示

---

这个css-only解决方案的唯一缺点是您必须依赖

div

，而不是

img

来进行悬停。如果你不能做到这一点，你唯一的选择就是javascript。

你可以使用jQuery来实现这一点

有几种方法可以悬停该元素。我建议你这样做：

1） 创建一个新类，如.active
2） 将显示无添加到两幅图像中
3） 创建jquery函数。我在这里写了一个例子

[https://jsfiddle.net/bvnaqL2s/][1] 

像这样的东西

或者更像这样

html

---

~

是通用的同级选择器，但是您的图像不是彼此的同级。而且，CSS中没有父选择器，所以您所追求的不能完全在CSS中完成；你需要JavaScript。或者您可以选择父div容器而不是图像。谢谢，但是对于父div，我不能，因为我在div中有更多的图像，所以我必须选择一个图像…：CCA不能让这个工作：，我遗漏了什么吗？@cdMinix您使用的是同一个图像。您应该使用不同的图像来查看差异。原来的问题是，两张图片不能在同一个分区中。但是在两个不同的分区中：c如果我没有答案，我只能使用一个分区。就像上面提到的j08691一样，在两个分区中使用严格的CSS看起来是不可能的，所以我想我会发布其他选项。很高兴这有帮助。有很多其他的方法可以进行调整，如果你有更多的问题，请告诉我。谢谢cdMinix，但我想在.voir plus mini img avant上悬停。因为实际上，我有很多图片，所以我只想选择一个来展示另一个。我将在我的4张照片中重复这一点。你只能使用javascript实现这一点，或者将所有图像放在同一分区中。我不会使用javascript，因为这对我来说太复杂了，所以我最好将所有图像放在同一分区中

.voir-plus-image > .voir-plus-img-avant {
  display: none;
}

.voir-plus-mini-img:hover + .voir-plus-image > .voir-plus-img-avant  {
  display: block;
}

<div class="thumbs-div">
    <img src="http://i.imgur.com/c0lfxLU.png" class="small s1">
    <img src="http://i.imgur.com/yfNIfVR.jpg" class="small s2">
    <img src="http://i.imgur.com/0hLtbEh.jpg" class="small s3">
    <img src="http://i.imgur.com/sVUEr5j.jpg" class="small s4">
    <img src="http://i.imgur.com/XCbY5Di.jpg" class="small s5">

    <img src="http://i.imgur.com/c0lfxLU.png" class="big b1">
    <img src="http://i.imgur.com/yfNIfVR.jpg" class="big b2">
    <img src="http://i.imgur.com/0hLtbEh.jpg" class="big b3">
    <img src="http://i.imgur.com/sVUEr5j.jpg" class="big b4">
    <img src="http://i.imgur.com/XCbY5Di.jpg" class="big b5">
</div>

.thumbs-div {
    width: 520px;
}

.small {
    width: 100px;
    height: 100px;
}

.big {
    width: 516px;
    height: 300px;
}

.b1 {
    display: block;
}

.b2, .b3, .b4, .b5 {
    display: none;
}

.s2:hover ~ .b2, .s3:hover ~ .b3, .s4:hover ~ .b4, .s5:hover ~ .b5 {
    display: block;
}

.s2:hover ~ .b1, .s3:hover ~ .b1, .s4:hover ~ .b1, .s5:hover ~ .b1 {
    display: none;
}