Css 图像上的鼠标悬停更改文本链接颜色

基本上我有6张图片和6个文本链接

我已经在图片上做了css悬停（彩色版本->悬停->黑白版本）

和文本链接（黑色字体->悬停->红色字体）

当我在链接上悬停时-图片是悬停版本（B&W），这没关系，但这只在这个方向上起作用，当我在图片上悬停时，在相反方向上起作用-文本链接保持不变（黑色字体）

这就是我的问题，如何连接这两个元素（文本链接和图片）

这是我的密码：

HTML

---

特别是当您使用背景图像时，我建议您将HTML重新构造为只使用一个锚。然后，当鼠标悬停时，您可以应用图像和字体颜色更改

请看一个简单的示例*。以下是新的CSS：

.element_1 a {
    width:130px;
    margin-left:20px;
    height:130px;
    display: block; 
    background: url('http://placekitten.com/200/300') top center no-repeat;
    color: red;
}

.element_1 a:hover{
    background-image: url('http://placekitten.com/300/300');
    color: green;
}

定义

：hover

状态时，只需指定正在更改的内容，而不必重新声明所有内容

---

*请注意，您的HTML/CSS需要整理。您错过了类选择器的

，并且有多个分号。确保您的代码经过验证，并且没有这些简单的错误，因为它们会掩盖真正的问题。

我没有看到任何用于更改链接颜色的CSS。我猜你是指望浏览器来做这件事吧

您可以通过将规则添加到现有CSS来解决此问题：

ul.menu li.element_1:hover{
 color: red;

 width:130px;
 margin-left:20px;

 display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;
}

---

另一种方法是将图像和文本放在单个元素中，在这种情况下，浏览器会将其自动链接高亮显示应用于整个元素。

感谢您的快速回复，问题是代码不是我写的，而且很凌乱-我知道：）但是。。。你的例子[link]是关于文本出现在图片上的情况，我想这样做：图片在顶部/空格在底部/文本链接你应该发现单独使用CSS很容易修改。请查看，以获取所需布局的示例。

.element_1 a {
    width:130px;
    margin-left:20px;
    height:130px;
    display: block; 
    background: url('http://placekitten.com/200/300') top center no-repeat;
    color: red;
}

.element_1 a:hover{
    background-image: url('http://placekitten.com/300/300');
    color: green;
}

ul.menu li.element_1:hover{
 color: red;

 width:130px;
 margin-left:20px;

 display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;
}