Question

这里的第一个问题就这样了。

我有一个简单的网页，其中包含如下文字链接：

链接1 LINK2 链接3 链路4 Link5

image1的图像2 图像3 图像4 图像5

在同一页面上，我有5个相应的图像，如上所示。我希望能够将鼠标悬停在link1上，并且除了image1之外，其他所有内容都会略微淡出。再次，如果我在link2上徘徊，除了image2之外的所有图像都需要略微淡化。

我不希望图像完全消失。此外，链接和图像的数量是动态的，因此可能会定期更改。

我花了好几个小时在线寻找答案，没有任何运气。

请帮助!!!

亲切的问候

Answer 1

试试这个：

<img class='images' id='im1' src='...'/>
<img class='images' id='im2' src='...'/>
<img class='images' id='im3' src='...'/>
<img class='images' id='im4' src='...'/>
<img class='images' id='im5' src='...'/>

<a href='#' class='tg' data-fd='im1'>image1</a>
<a href='#' class='tg' data-fd='im2'>image2</a>
<a href='#' class='tg' data-fd='im3'>image3</a>
<a href='#' class='tg' data-fd='im4'>image4</a>
<a href='#' class='tg' data-fd='im5'>image5</a>

并且脚本就像这样

$('.images').css({'opacity':'.5'});
    $('.tg').hover(function(){
        $('.images').css({'opacity':'.5'});
        var dt=$(this).attr('data-fd');
        $('#'+dt).css({'opacity':'1'});
    });

样本： http://jsfiddle.net/LwjnzbLs/2/

悬停在文本链接上时突出显示相应的图像

1 个答案: