如何让img在悬停时消失？

How can I make an image in a webpage disappear when the user hovers over it?

当用户将鼠标悬停在网页上时,如何使网页中的图像消失?

5 个解决方案

#1

A little bit of CSS should solve this:

一点点CSS应该解决这个问题:

img:hover {
    display: none;
}

Obviously you'll want to specify a unique ID or class (depending on what behaviour you wanted).

显然,您需要指定唯一的ID或类(取决于您想要的行为)。

#2

Image is hidden onhover:

图像隐藏在悬停状态:

<img onmouseover="this.style.visibility = 'hidden';" src="..." />

Image is hidden onhover and reappears after the mouse moves away

图像被隐藏在悬停状态,并在鼠标移开后重新出现

<img onmouseover="this.style.visibility = 'hidden';" onmouseout="this.style.visibility = 'visible';" src="..." />

#3

I was trying to do the same thing and found display:none to be really glitchy.

我试图做同样的事情,发现显示:没有真正的毛病。

Try this instead.

试试这个。

img:hover {
    opacity: 0;
}

#4

Try this:

<div id="test" name="test" onmouseover="document.getElementById('test_image').style.visibility= 'hidden';" onmouseout="document.getElementById('test_image').style.visibility= 'visible'">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" id="test_image">
</div>

#5

Jquery:

$(document).ready(function() {
        $("image").hover(function() {
            $(this).animate({"opacity": "0"}, "fast"); //fast(200 milisec) or slow(600 milisec)
        },
        function() {
            $(this).animate({"opacity: "1"}, "fast");
        });
    });

#1