Question

当鼠标在图像上移动时，我需要更改文本颜色

我在这里做了一些工作。我无法改变文字颜色。任何人都可以帮助我。

HTML：

<div class="hover">
<a href=""><img src="th.jpg" /><span>Add</span></a>
</div>

的CSS：

.hover
{
width:65px;
height:56px;
display:inline;
text-align:center;
}
.hover a
{
color:#000;
display:block;
margin:0 5px 0 0;
float:left;
text-align:center;
height:56px;
text-decoration:none;
width:65px;
}
.hover span {
display:block;
text-align:center;
}
.hover img {
margin:0 auto;
padding:3px 0;
}
.hover img:hover{
border:solid 1px #ccc;
}

Answer 1

你应该改变：

.hover img:hover{
border:solid 1px #ccc;
}

到

.hover a:hover img{
border:solid 1px #ccc;
}

早期IE不支持将鼠标悬停在“a”

以外的元素上

更改文字颜色：

.hover a:hover{
color:red;
}

Answer 2

使用.hover:hover，.hover a:hover或img:hover + span。您可能必须明确设置子元素以继承其文本颜色。

前两个不会完全按照您的意愿行事，但如果最后一个不起作用，请尝试使用它们。

如果你真的想让它只是在鼠标悬停在图像上时触发，但是改变另一个元素的样式，如果上面三个选择器中的最后一个对你不起作用，那么jquery可能就是这样。

Answer 3

将此添加到您的代码中：

.hover a:hover {
   color: #whatevercoloryouwant;
}

某些旧版浏览器会忽略将鼠标悬停在除链接之外的任何内容上。因此我选择'a'。

XpertEase

Answer 4

如果您希望标签内的文字改变颜色，则CSS应为：

.hover a span{ /* THE STYLE FOR THE SPAN */ }
.hover a:hover span{ /* THE STYLE FOR THE SPAN ON MOUSEOVER */ }

Answer 5

你可以通过为外部标签编写CSS来做到这一点。 e.g。

a：悬停{ 颜色：绿色; }

这会改变标签内任何文字的颜色。

Answer 6

使用html和css你可以做这样的事情;

<html>
<style type="text/css">
td.menuon { color: #CC0000; }
td.menuoff { color: #000000; }
</style>

<table>
<tr>
<td class="menuoff" onmouseover="className='menuon';" onmouseout="className='menuoff';">
test
</td>
</tr>
</table>
</html>

将其另存为html文档，并在浏览器文本中打开鼠标悬停时显示为红色。

Answer 7

在你的css中添加：

.hover a:hover { color:red; /* or whatever color you want */ }

当鼠标在图像上移动时，如何使文本颜色更改

7 个答案: