悬停在背景图片上时文本颜色发生变化

我试图在每张图片的顶部使用“追逐颜色”文字，以便在使用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); 
    }); 

});

来源

2014-04-11 Betzyc

是否有显示每幅图像标题多个脚本，或都是3个标题总是显示？ – Jason

所有3个标题在悬停之前总是以白色显示，只要一个单独的图像悬停在上面，其顶部的文本应该变为黑色 – Betzyc

很难判断哪个图像位于代码的哪个图像之上你提供的。有9个图像和3个标题，并没有CSS来告诉每个位置。 – Jason

假设你有9个图像和9页的标题，你可以在同一个“位置”更改文本的颜色（指数）作为图像：

$('.container img').hover(
    function(){ 
     $('#chase'+($(this).index+1)).css('color','black'); 
    }, 
    function(){ 
     $('#chase'+($(this).index+1)).css('color','white'); 
    } 
);

是你在做什么后？

来源

2014-04-11 01:56:26 Jason

我使用“.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; 
}

来源

2014-04-11 02:01:06 nej

悬停在背景图片上时文本颜色发生变化

回答

相关问题