0

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

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

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

当我悬停在链接上时-图片正在悬停版本（B＆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;;
4

2 回答 2

0

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

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

于 2013-03-20T16:53:42.240 回答
0

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

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

于 2013-03-20T16:55:52.717 回答