Question

I have this example code that hovers an image to change the background color. How do you fill the entire image with color when hovered?

In my code snippet, it only fills the background color of an a tag element but not the image.

Here's an image to further clarify my question.

中悬停时，如何完全更改图像的颜色？

如何使用标记元素中的悬停效果来实现此目的。

＆＃13;

a img:hover {
    background-color: purple;
}
a:hover {
    background-color: yellow;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- Hovered with image no text -->
<a href="https://www.w3schools.com"><img src="cart.png"></a>

<!-- Hovered without image just text -->
<a href="http://www.wikipedia.org">Change color text</a>
</p>

</body>
</html>

＆＃13;

Answer 1

假设您的图像是白色而其他部分是透明的。只需像这样更改CSS：

a img {
    background-color: purple;
}
a:hover img {
    background-color: yellow;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<!-- Hovered with image no text -->
<a href="https://www.w3schools.com"><img src="cart.png"></a>

<!-- Hovered without image just text -->
<a href="http://www.wikipedia.org">Change color text</a>
</p>

</body>
</html>

Answer 2

我找到了另一种改变背景图像的方法。我想有两个图像，所以当它盘旋它会改变图像。感谢@Jaromanda X的信息

#my-img:hover {
    content: url('images/pinkcart.png');
}

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<img id="my-img" src="images/redcarticon.png"/>
</p>

</body>
</html>

还要感谢你们帮助我。

Answer 3

使用jQuery尝试以下解决方案：

＆＃13;

a img:hover {
    background-color: purple;
}
a:hover {
    background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<!-- Hovered with image no text -->
<a id='image' href="https://www.w3schools.com"><img src="cart.png"></a>

<!-- Hovered without image just text -->
<a id="text" href="http://www.wikipedia.org" onmouseover="$('#image').css('background-color', 'purple');" onmouseout="$('#image').css('background-color', 'white');">Change color text</a>

</body>

＆＃13;

Answer 4

请更新样式

a{
     padding:15px;
     background-color: purple;
     display:block;
}
a:hover {
    background-color: yellow;
}

在<a> tag element?

4 个答案: