![](/img/trans.png)
[英]Live preview of text makes the link not change background color when hovered over
[英]Text change color when hovered over background image
我正在尝试使用javascript将鼠标悬停在每张图片的上方,将“追逐颜色”文本更改为黑色。
<div class="container">
<img src="http://images2.webydo.com/31/313624/3958/21b785db-14ea-42f7-af0d-7e7a8d8019d9.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/9657ddfd-81e8-4154-bc61-bbe30e4a8740.jpg" />
<img src="http://images2.webydo.com/31/313624/3958/909af36d-b941-4a20-9441-20505c035da3.jpg"/>
<img src="http://images2.webydo.com/31/313624/3958/b338fd3a-c3c4-4dbd-af54-fc49f951ea3f.jpg_400" />
<img src="http://images2.webydo.com/31/313624/3958/6d1e573d-3eb9-42b1-ad34-c099bde75607.jpg_400" />
<img src="http://images2.webydo.com/31/313624/3958/c2bafb57-4a2a-4f48-a75d-abe4be51f252.jpg_400"/>
<img src="http://images2.webydo.com/31/313624/3958/421c9f82-67ef-4545-ab6b-976a11f5d406.jpg_400" />
<img src="http://images2.webydo.com/31/313624/3958/43e1d8ae-4e94-4355-a5ce-e329123daf41.jpg_400" />
<img src="http://images2.webydo.com/31/313624/3958/c8d99a50-a3d1-41c6-9af7-02ed02d3e820.jpg_400"/>
<div class='titles'>
<div id="chase1">Chasing Color</div>
<div id="chase2">Chasing Color</div>
<div id="chase3">Chasing Color</div>
</div>
</div>
$(document).ready(function () {
$('.container img').hover(function () {
$(this).fadeTo('fast', 0.5);
}, function () {
$(this).fadeTo('fast', 1);
});
});
假设您有9张图片和9个标题,则可以在与图片相同的“位置”(索引)处更改文本的颜色:
$('.container img').hover(
function(){
$('#chase'+($(this).index+1)).css('color','black');
},
function(){
$('#chase'+($(this).index+1)).css('color','white');
}
);
那是你的追求吗?
我使用“ .chase”作为图像的示例类。 试试这个jQuery
$(document).ready(function () {
$('.container img').hover(function () {
$(this).fadeTo('fast', 0.5);
}, function () {
$(this).fadeTo('fast', 1);
});
$(".chase").mouseover(function(){
$("#chase1").css("color","black");
});$(".chase").mouseout(function(){
$("#chase1").css("color","white");
});
});
这个CSS
.chase /*sample image class */
{
position:relative;
left:0;
top:0;
}
#chase1
{
z-index:100;
position:absolute;
font-size:24px;
font-weight:bold;
left:750px;
top:50px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.