I am trying to select a image inside a link.

JQUERY:

$('#selskaber img').hover(function () {
    $(this).next().css({'border' : '1px solid #0167B0 !important'});
  }, 
  function () {
    $(this).next().css({'border' : '1px solid #CCCCCC !important'});
  }
);

HTML:

<div id="selskaber">
    <a target="_blank" href="#">
    <img style="border:none;" src="/images.pmg" alt="Telenor">
    </a>
</div>

UPDATE:

I have removed the next(). Still no border is added.

My CSS:

#wrap #selskaber a {border:none;margin-left:10px;display:inline-block !important;
    height: 41px;
    margin-top: 5px;
    width: 150px;}

I am trying to select a image inside a link.

JQUERY:

$('#selskaber img').hover(function () {
    $(this).next().css({'border' : '1px solid #0167B0 !important'});
  }, 
  function () {
    $(this).next().css({'border' : '1px solid #CCCCCC !important'});
  }
);

HTML:

<div id="selskaber">
    <a target="_blank" href="#">
    <img style="border:none;" src="/images.pmg" alt="Telenor">
    </a>
</div>

UPDATE:

I have removed the next(). Still no border is added.

My CSS:

#wrap #selskaber a {border:none;margin-left:10px;display:inline-block !important;
    height: 41px;
    margin-top: 5px;
    width: 150px;}

• javascript
• jquery

• 1 Maybe removing the two .next() parts helps. – Felix Rabe Commented Feb 13, 2012 at 21:27
• Get rid of !important. – user1106925 Commented Feb 13, 2012 at 21:37

6 Answers 6

Um... why are you using Javascript here?

#selskaber a img{
    border:1px solid #ccc;
}

#selkskaber a:hover img{
    border: 1px solid #0167B0;
}

will do exactly the same thing, and be patable down to IE6 with no JS required.

That image doesn't have any sibling, so next won't give you anything.

If you're trying to select the img, just remove the next()

    $('#selskaber img').hover(function () {
    $(this).css({'border' : '1px solid #0167B0 !important'});
      }, 
      function () {
        $(this).css({'border' : '1px solid #CCCCCC !important'});
      }
    );

next:

Description: Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

Your selector '#selskaber img' already gives you the image. So inside the hover callbacks if you need the image $(this) will suffice. No need to call next:

$('#selskaber img').hover(function () {
    $(this).css({'border' : '1px solid #0167B0 !important'});
}, 
function () {
    $(this).css({'border' : '1px solid #CCCCCC !important'});
});

Remove next(), you already selected the img tag:

$('#selskaber img').hover(function () {
  $(this).css({'border' : '1px solid #0167B0 !important'});
  }, 
  function () {
    $(this).css({'border' : '1px solid #CCCCCC !important'});
  }
);

$(this) inside your functions is the <img>. $(this).next() is nothing, so just remove the call to next().

There's no node after the img element. The $(this) context is relative to the img element that it is hovering over. Try removing next().

$('#selskaber img').hover(function () {
    $(this).css({'border' : '1px solid #0167B0 !important'});
    }, 
    function () {
        $(this).css({'border' : '1px solid #CCCCCC !important'});
    }
);