将图片悬停在CSS中？

Question

你好朋友。 我想在悬停时更改图像，但是我的代码无法正常工作。

到目前为止的代码

<!DOCTYPE html>
<html>
<style>
a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
    }

a.rollover span.displace img:hover {
    background: url("images/red.png");
    display: block;
    }


</style>
<body>
<a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png"/></a>


</body>
</html>

任何帮助都受到高度赞赏...

Answer 1

下面的代码应该工作。 CSS：

<style>
a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
     background: url("images/blue.png");
}

a.rollover span.displace:hover {
    background: url("images/red.png");        
}
</style>

和HTML：

<a href="#" class="rollover" title="Webvamp"><span class="displace"></span></a>

您正在尝试为显示其他图像的图像放置背景，因此基本上您的背景隐藏在src指定的图像下方

---

如果您想拥有img-您可以使用以下答案中的解决方案：

<a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png" onmouseover="this.src='images/red.png';" onmouseout="this.src='images/blue.png';"/></span></a>

---

另一种选择是：

<a href="#" class="rollover" title="Webvamp"><span class="displace"><img src="images/blue.png" class="initial" /><img src="images/red.png" class="hover"/> </span></a>

和CSS：

img.hover{display:none;}

a.rollover span.displace {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;        
}

a.rollover span.displace:hover img.hover{
    display:block;      
}

a.rollover span.displace:hover img.initial{
    display:none;      
}

Answer 2

您的逻辑有些不清楚。 您要尝试做的是尝试设置背景图像，对于图像，将设置该背景图像但未显示，因为您的图像将与元素的背景图像重叠。

试试这个代码：

<!DOCTYPE html>

<html>

<style>

a.rollover span.displace div.image, a.rollover span.displace  {
    display: block;
    width: 150px;
    height: 44px;
    text-decoration: none;
    }

a.rollover span.displace div.image {
    background: url("images/blue.png");
}

a.rollover span.displace div.image:hover {
    background: url("images/red.png");
    }

</style>

<body>

<a href="#" class="rollover" title="Webvamp">

    <span class="displace">

        <div class="image"></div>

    </span>

</a>

</body>

</html>

在这段代码中，我要做的是获取一个div并为其设置背景图像。 当有人将鼠标悬停在该div ，CSS会更改div的背景图像，并在用户从div撤回其光标时将其更改回。