Question

正如我在标题中所说，我想通过悬停其他img来改变img。我将在第一个img将被称为＆＃34; voir-plus-mini-img-avant＆＃34;第二个img将被称为＆＃34; voir-plus-img-avant＆＃34;。

这是我的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;
}

所以当你徘徊＆＃34; voir-plus-mini-img-avant＆＃34; ＆＃34; voir-plus-img-avant＆＃34;被作为一个块被取消。 Normaly，＆＃34; voir-plus-img-avant＆＃34;不会显示。我通过做研究看到〜当你想通过悬停一个来对另一个做一个动作。但它不起作用:(

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

Ps：我不能将第一个img放到另一个大div中，因为这两个图像的大小和东西都不一样。

Answer 1

这样的东西？

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

Answer 2

试试这个：

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

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 4

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

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

1）创建一个新的类，如.active;
2）在你的两个图像上添加display none 3）创建jquery函数。我在这里写了一个例子[https://jsfiddle.net/bvnaqL2s/][1]

通过悬停其他<img/>来更改<img/>个元素

4 个答案: