0

大家好。我想更改悬停时的图像，但我的代码不起作用。

到目前为止的代码

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

任何帮助都非常感谢...

4

2 回答 2

0

下面的代码应该可以工作。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;      
}
于 2012-12-26T13:08:04.873 回答
0

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

试试这个代码：

<!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当有人将鼠标悬停div在div.

于 2012-12-26T13:09:33.980 回答