通过悬停另一个 <img> 来更改 <img> 元素

Question

正如我在标题中所说，我想通过将鼠标悬停在另一个 img 上来更改 img。我将悬停的第一个 img 将被称为 "voir-plus-mini-img-avant"，第二个 img 将被称为 "voir-plus-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>

还有我的 CCS

.voir-plus-mini-img-avant:hover ~ .voir-plus-img-avant {
    display: block;
}

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

因此，当您悬停 "voir-plus-mini-img-avant" 时，"voir-plus-img-avant" 会显示为一个块。通常，"voir-plus-img-avant" 不会显示。我通过研究看到 ~ 是当你想通过悬停一个来对另一个做一个动作。但它不起作用:(

所以如果你能帮助我，那就太好了:)

Ps : 我无法将第一个 img 放入另一个大 div 因为 2 个图像大小不一样。

Answer 1

试试这个：

.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隐藏。

Answer 2

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

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

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

请参阅 http://codepen.io/anon/pen/dPELBq 进行演示。

这个仅 css 解决方案的唯一不足是您必须依赖 div，而不是 img 来悬停。如果你做不到，你唯一的选择就是 javascript.

Answer 3

您可以使用 jQuery 来执行此操作。

有几种悬停该元素的方法。我建议您这样做：

1) 创建一个新的 class 比如 .active;
2) 将显示 none 添加到您的双图像
3) 创建 jquery 函数。我在这里写了例子[https://jsfiddle.net/bvnaqL2s/][1]

Answer 4

是这样的吗？

https://jsfiddle.net/Hastig/roufhj8m/

或者更像这样？

http://jsfiddle.net/Hastig/s4q40yxj/2/

html

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

css

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

通过悬停另一个 <img> 来更改 <img> 元素

Change an <img> elements by hovering an other <img>

html

css

hover