javascript - Jquery Chaining on different link

Question

Basically what I want to achieve is when I mouseenter the "first a" link, the link on the second will turn red, when I mouseout it should return to blue, but I cant seem to target it using $('this').

$('body').on('mouseenter', '.shareButtonsWrapper div a:first-child', function(){
    $(this).parent().$(".shareButtonsWrapper div a:last-child").css({"color":"red"});
}).on('mouseleave', '.shareButtonsWrapper div a:first-child', function(){
    $(this).parent().$(".shareButtonsWrapper div a:last-child").css({"color":"blue"});
});

Example Here.

Answer 1

看看这个 JSbin。

http://jsbin.com/OhutAxu/2/edit

$("a").hover(
    function () {
        $(this).next().css('color', 'red');
    }, 
    function () {
        $(this).next().css('color', 'blue');
    }
);

您需要使用 JQuery .next() 函数才能访问下一个元素。希望能帮助到你

Answer 2

你可以试试这个

var link = '.shareButtonsWrapper div a:first';
$('body').on('mouseenter', link, function(){
    $(this).next('a').css({"color":"red"});
}).on('mouseleave', link, function(){
    $(this).next('a').css({"color":"blue"});
});

CodePan 示例。

Answer 3

$('.shareButtonsWrapper div a:first-child').on('mouseenter', function(){
  $(this).siblings().css("color","red");
}).on('mouseleave', function(){
  $(this).siblings().css("color", "blue");
});

您可以使用 next() 函数而不是兄弟姐妹()。