鼠标悬停在图像上更改文本链接颜色答案

【问题标题】：mouseover on image changes text link color鼠标悬停在图像上更改文本链接颜色
【发布时间】：2013-03-09 21:56:49
【问题描述】：

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

我已经完成了 CSS 悬停在图片上（彩色版 -> 悬停 -> 黑白版）

在文本链接上（黑色字体 -> 悬停时 -> 红色字体）

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

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

这是我的代码：

HTML

<ul class="menu">     
li class="element_1"><a href="./first_link.html"></a>
<a href="./first_link.html" class="text">Text of the<br>First<br>Link</a></li>

[rest of the elements list]
</ul>

CSS

 ul.menu element_1{
 width:130px;
 margin-left:20px;
  height:130px;
 display: block; background: url(img/menu_1.jpg) top center no-repeat;;
}


ul.menu li.element_1:hover{
 width:130px;
 margin-left:20px;

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

【问题讨论】：

标签： css image text hover hyperlink

【解决方案1】：

特别是当您使用背景图像时，我建议您重组您的 HTML 以仅使用单个锚点。然后，当悬停它时，您可以应用图像和字体颜色更改。

看看at the jsFiddle 一个简单的例子*。这是新的 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 需要整理。您错过了类选择器的 . 并且有多个分号。确保您的代码经过验证并且没有这些简单的错误，因为它们会掩盖真正的问题。

【讨论】：

感谢您的快速回复，问题是代码不是我写的，而且很乱 - 我知道这一点 :) 但是...您的示例 [link]jsfiddle.net/cherryflavourpez/cV8uh/[/link] 是关于文本时的情况在图片上，我想做这个：顶部的图片/底部的空间/文本链接
你应该会发现单独使用 CSS 很容易修改。查看updated fiddle 了解您所追求的布局示例。

【解决方案2】：

我没有看到任何用于更改链接颜色的 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;
}

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

【讨论】：