Question

我的一位客户给了我一个有趣的网站来编码。基本上，有很多项目。项目名称和简要说明列在左栏中。每个项目都有一个与之关联的图像，放在右侧列中。每张图像都覆盖了一种颜色 - 当您翻转图像时，将移除叠加层，以其自然色显示下方的图像。（这是通过使用Jquery在此论坛上的其他人的帮助实现的。）

客户端现在想要做的是在用户滚动图像时更改项目文本链接的颜色。例如。当用户滚动“Atlantic Yarns”图像时，客户希望右侧的“Atlantic Yarns”文本链接以蓝色翻转。客户还希望它以另一种方式工作 - 当用户滚动文本链接时，将从图像中删除叠加层。我不知道如何做到这一点，甚至不确定它是否可以完成，但客户坚持！请任何人帮忙吗？

演示网站位于：http://dob.ck-services.co.uk

Answer 1

$('a > img').hover(function() {
    var a = $(this).closest('a');
    $('a[href="' + a.attr('href') + '"]').not(a).addClass('hover');
}, function() {
    var a = $(this).closest('a');
    $('a[href="' + a.attr('href') + '"]').not(a).removeClass('hover');
});

然后您只需要为a.hover添加一个CSS规则，该规则应用与a:hover相同的样式，例如：

a:hover, a.hover {
    color: #0f0;
}

Answer 2

尝试以下代码。

jQuery("#right_col").children().hover(
function(){//hover over
  var $this = jQuery(this);
  var id = $this.attr("id");
  jQuery("#" + id + "_desc").find("a").addClass("projectHover");
  $this.find(".blueoverlay").hide();
}, function(){//hover out
  var $this = jQuery(this);
  var id = $this.attr("id");
  jQuery("#" + id + "_desc").find("a").removeClass("projectHover");
  $this.find(".blueoverlay").show();
});

此代码对图像也有悬停效果，您已经在做了。所以，删除其他代码。

注意：请在CSS中添加以下课程。

.projectHover{color: red;}

Answer 3

鉴于ID的相似性，你能做到这样吗？

$('#right_col a img').hover(function(){
    $parentname = $(this).closest('div').attr('id');
    $('#'+$parentname+'_desc a').toggleClass('hover');
});

$('#left_col h2 a').mouseover(function(){
    $parentname = $(this).closest('div').attr('id');
    $imgname = $parentname.replace(/_desc/i,'');
    $('#' + $imgname).mouseover();
}).mouseout(function(){
    $('#' + $imgname).mouseout();
});

然后将CSS添加到.hover类中，如上所述，像这样？

#project1_desc a:hover, #project1_desc a.hover {
  color: #4F99FF;
}

滚动相关图像时使用Jquery更改文本链接的颜色

3 个答案: