如何使文字的颜色改变，当鼠标移动到图像上

how to make Text color change, when mouse move on the image

本文关键字：移动 鼠标 图像 文字 何使 颜色 改变      更新时间：2023-09-26

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

这里我已经做了一些工作。我不能改变文字的颜色。有谁能帮帮我吗?

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

你应该改变:

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


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

早期ie不支持悬停在除"a"以外的元素上

改变文字颜色:

.hover a:hover{
color:red;
}

使用.hover:hover或.hover a:hover或img:hover + span。您可能需要显式地设置子元素以继承其文本颜色。

前两个不能完全达到你想要的效果，但如果最后一个不起作用，可以尝试一下。

如果你真的想让它只触发悬停在图像上，但在另一个元素中改变样式，如果上面三个选择器中的最后一个不能为你工作，jquery可能是一种方法。

将此添加到您的代码中:

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

一些旧的浏览器会忽略悬停在链接以外的任何东西上。因此我选择"a"

XpertEase

如果你想让标签内的文本改变颜色，那么CSS应该是:

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

可以通过为外部标记编写CSS来实现。例如

:{徘徊颜色:绿色;}

这将改变标签内任何文本的颜色

使用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文档并在浏览器中打开，鼠标悬停时文本显示为红色

添加到你的css中:

.hover a:hover { color:red; /* or whatever color you want */ }
相关文章：