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 - 你可以使用this回答的解决方案：

<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退出光标时将其更改回来。

跨度图像悬停在CSS？

2 个答案: