如何让图像在悬停时消失？

Question

当用户将鼠标悬停在网页上时，如何让网页中的图像消失？

Answer 1

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

img:hover {
    display: none;
}

显然，您需要指定一个唯一的ID或类（取决于您想要的行为）。

Answer 2

图像隐藏在onhover：

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

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

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

Answer 3

试试这个：

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

Answer 4

我试图做同样的事情，发现显示：没有真正的小故障。

试试这个。

img:hover {
    opacity: 0;
}

Answer 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");
        });
    });