Question

基本上我有6张图片，其中包含6个文字链接

我已经完成了css徘徊在图片上（彩色版 - ＆gt;悬停 - ＆gt;黑＆白版）

和文字链接（黑色字体 - ＆gt;悬停 - ＆gt;红色字体）

当我在链接上徘徊时 - 图片正在徘徊在版本（B＆amp; W）并且没关系，但是这只是在这个方向上工作，当我在图片上徘徊时相反的方向 - 文本链接保持不变（黑色字体）

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

这是我的代码：

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

Answer 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需要整理。您错过了班级选择器的.并且有多个分号。确保您的代码验证并且没有这些简单的错误，因为它们将掩盖真正的问题。

Answer 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;
}

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

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

2 个答案: