-4

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.

The Alpha
  • 143,660
  • 29
  • 287
  • 307
Vincent Chua
  • 969
  • 6
  • 20
  • 41

3 Answers3

0

Have a look at this JSbin.

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

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

You need to use JQuery .next() function in order to access next element. Hope it helps

Pavel
  • 542
  • 5
  • 11
0

You may try this

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 Example.

The Alpha
  • 143,660
  • 29
  • 287
  • 307
0
$('.shareButtonsWrapper div a:first-child').on('mouseenter', function(){
  $(this).siblings().css("color","red");
}).on('mouseleave', function(){
  $(this).siblings().css("color", "blue");
});

You may use the next() function instead of the siblings().

Robin Thomas
  • 1,317
  • 8
  • 15