Question

我有这样的代码

<tr>
<td>
    <img id="one" src="abc.jpg">
</td>
<td>
    <img id="two" src="xyz.jpg">
</td>
<td>
    <img id="three" src="def.jpg">
</td>
</tr>

最初我想要显示所有三个图像但是当我将鼠标悬停在图像上时，应该隐藏一个图像二和三个

怎么做？

Answer 1

给你的<tr>上课。然后在行悬停时隐藏图像，但显示正在悬停的图像：

.imgRow:hover img {
    opacity: 0;
}
.imgRow:hover img:hover {
    opacity: 1;
}

jsfiddle.net/J7wHq

演示具有良好的过渡效果和一些旧的IE支持：jsfiddle.net/J7wHq/2

Answer 2

据我所知，只有CSS才能实现你想要做的事情

http://jsfiddle.net/87zh6/

#id1:hover + #id2
{
    //Whatever you put here will modify #id2 when #id1 is hovered.
}

但是，您只能在＃id1之后直接修改元素。如果＃id2不是代码中的下一个元素，那么它将不起作用。

这就是为什么在我提供的jsfiddle中它会隐藏第二个图像而不是第三个图像。

我建议使用Javascript形式来完成任务。

Answer 3

据我所知，只有CSS才有可能。我建议使用jQuery。它非常容易学习，它将真正让您的生活更轻松。我建议使用W3 Tutorials。

至于您的问题，您需要为每个<td>元素提供ID并使用jQuery的.hover()方法：

$("#one").hover(function() {
    $("#two, #three").toggle();
});

当您将鼠标移到图像1上时，这将隐藏/显示图像2和3。如果您只想隐藏图像（而不是切换），可以使用：

$("#two, #three").hide();

使用JSFiddle：http://jsfiddle.net/7gUL4/

Answer 4

是使用jquery：

<script src=" <!-- you can put jqueries code URL in hear go to code.jquery.com copy paste url --> ">
</script> <!-- that loads jquery's stuff -->

<script>
$("#one").hover(function(){
       $("img').hide();
});
 <!-- repeat for others -->
</script>

使用css在悬停一个图像时隐藏其他图像

4 个答案: