鼠标悬停图片上的文字改变链接的颜色

我已经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;;

来源

2013-03-20 user2191804

尤其当你正在做使用背景图片，我会建议重组你的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需要整理。您错过了您的课程选择器的.，并且有多个分号。确保你的代码验证并没有这些简单的错误，因为它们将掩盖真正的问题。

来源

2013-03-20 16:53:42 CherryFlavourPez

感谢您的快速回复，问题是代码不是由我写的，是凌乱的 - 我知道这个:)但是...你的例子[链接] http://jsfiddle.net/cherryflavourpez/cV8uh/ [ /链接]是关于当文字是在图片上的情况，我想这样做：图片顶部/空格留在底部/文字链接 – user2191804 2013-03-20 17:08:30

好了，问题解决了，再次感谢您的快速回复！ – user2191804 2013-03-20 17:11:04

你应该发现很容易用CSS单独修改。查看[更新的小提琴]（http://jsfiddle.net/cherryflavourpez/cV8uh/），查看您之后的布局示例。 – CherryFlavourPez 2013-03-20 17:12:10

我没有看到任何用于更改链接颜色的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-20 16:55:52

鼠标悬停图片上的文字改变链接的颜色

回答

相关问题