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

问题描述

我被要求帮助修复一个旧网站上的一些问题，该网站从 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

解决方法

您可以在许多功能中使用它，下面给出了其中之一

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

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

hover html javascript mouseover