Search code examples
jquerycssjquery-hoverjquery-get

jQuery .get and .css setting background image

I have several divs making up a single button on a menu. Using jQuery, I'm trying to update the divs to a hover background image, without using individual selectors.

$(document).ready(function () {
   $(".menuitem div").on('hover', function () {
      $("div").get(1).css('background-image', 'url("img/header/leftHov.png");');
   });
});

When I run this code, I get "Object div has no method 'css'". My HTML in case you were wondering looks something like this:

<div style="width:100px;" class="menuitem">
    <div style="background: url('img/header/leftReg.png');">
    <div style="background:url('img/header/midReg.png');background-repeat:repeat-x;">
    <a href="./about.php" class="menu">About </a>
    <div style="background:url('img/header/rightReg.png');">
</div>
Solution

  • .get() will give you the DOM element, not the jQuery object. You should use .eq() instead. However, since you are already binding the event to the div that you want, simply use $(this):

    $(this).css('background-image', 'url("img/header/leftHov.png")');