使用jquery在滾動相關圖像時更改文本鏈接的顏色

我的一位客戶給了我一個有趣的網站代碼。基本上，有一批項目。項目名稱和簡要說明列在左側欄中。每個項目都有一個與之相關的圖像，放在右側欄中。每個圖像都有一個覆蓋的顏色 - 當您翻轉圖像時，覆蓋層將被移除，以其自然色彩顯示下方的圖像。（這是通過本論壇上其他人的善意幫助實現的，使用Jquery）。使用jquery在滾動相關圖像時更改文本鏈接的顏色

客戶端現在想要做的是在用戶滾動圖像時更改項目文本鏈接的顏色。例如當用戶翻閱「大西洋紗線」圖像時，客戶想要右側的「大西洋紗線」文本鏈接以藍色翻轉。客戶也希望它以另一種方式工作 - 當用戶滾動文本鏈接時，覆蓋圖從圖像中移除。我不知道如何做到這一點，甚至不知道它可以做，但客戶堅持！請任何人都可以幫忙嗎？

演示站是在這裏：http://dob.ck-services.co.uk

來源

2011-05-16 Kelly Teagle

$('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; 
}

來源

2011-05-16 14:31:52 ThiefMaster

比我的好。 – iMatoria 2011-05-16 14:43:10

Hi ThiefMaster，感謝您的支持，我已經安裝了它，但一直無法使它工作。我是否認爲它找到了最近的標籤，並在其中添加了class =「hover」？如果是這樣，它可能不會工作，因爲它並不總是最近的標籤需要改變，這要感謝客戶的設計。你有任何進一步的想法？ – 2011-05-16 15:01:30

不，它需要從最近的（在你的情況：父母）'a'標籤的href，並採用*完全相同的* href另一個標籤，並將類添加到這個。我通過您的網站上的螢火蟲控制檯測試它，它工作正常。 – ThiefMaster 2011-05-16 16:31:37

試試下面的代碼。

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;}

來源

2011-05-16 14:37:46 iMatoria

鑑於身份證的相似性，你可以這樣做嗎？

$('#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; 
}

來源

2011-05-16 15:18:48

使用jquery在滾動相關圖像時更改文本鏈接的顏色

回答

相關問題