尝试连接图像的鼠标悬停以在 javascript 文件中突出显示其下方的文本链接

Question

我被要求帮助修复一个旧网站上的一些问题，该网站是从 Flash 版本转换而来的，只是出于投资组合的目的而存档。我已经完成了除了这个之外的所有部分，因为我不是 javascript 本地人。

该页面由两列组成。右侧是各种缩略图。当您单击缩略图时，左栏预览窗格中会弹出一个预览图像，其下方会显示艺术家的姓名，以及一个链接，可单击该链接以获取有关另一页上该作品的更多信息。

链接本身在悬停状态下变为白色。目标是当您也将鼠标悬停在所述预览图像上时，链接也会变为白色悬停状态。

现有的javascript是这样的：

//-----------------点击拇指时--填充正确的预览图像和艺术家信用/链接 $('img.thumbI').click(function () { //通过替换/重命名src来交换图像 $('#previewImg').attr('src', $(this).attr('src').replace('assets/posters-thumbs/t-', 'assets/posters-2x/')); //生成详细的pg URL var detailURL = 'pages/posterArtist.html?id=' + $(this).attr('id'); // 更改预览图片链接 $('.previewLink').attr('href', detailURL); //更改艺术家信用额度，使用来自 img alt 属性的文本 $('.nameInner').html($(this).attr('alt')); //更改下载链接地址 //$('.dLink').attr('href', detailURL); $('.download').attr('href', detailURL);

    ///----> Flash of white border...timing issue?
    //remove white border from the Glaser preview size --cuz they are circular--
    var artist = $(this).attr('alt');
    
    if (artist == "Milton Glaser"){
       $("#previewPane img").css("border-color", "black"); 
    } else {
        $("#previewPane img").css("border-color", "white");
    }
    
    

});

});

这是预览窗格的 HTML：

<preview>
            <div id="previewPane">
                <a href="pages/posterArtist.html?id=neumeier1" class="previewLink"><img id="previewImg" src="assets/posters-2x/neu-war.png" width="280" /></a>
            </div>
            <div id="artistCredit">
                <p class="artistName"><span class="nameInner">MARTY NEUMEIER</span> | <a class="download" href="pages/posterArtist.html?id=neumeier1">DOWNLOAD</a></p>
            </div>
        </preview>

我什至不知道从哪里开始，希望得到一些指导。非常感谢！

Link to an image of what I'm trying to achieve

Answer 1

您可以在许多功能中发挥它的作用，其中之一如下所示

$(document).on('mouseover','#previewImg',function(){
  $('.download').addClass('white');
});
$(document).on('mouseleave','#previewImg',function(){
  $('.download').removeClass('white');
});

//style
 .white{
   color : #fff;
 }