文本悬停在背景图像上时会更改颜色

Text change color when hovered over background image

本文关键字：颜色 悬停 背景 图像 文本      更新时间：2023-09-26

每当使用javascript悬停图像时，我都会尝试将每个图像顶部的"Chasing Color"文本更改为黑色。

<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;
}
相关文章：