jquery selectors

Question

Hi. I need to select a class in my javascript and change one of its property. but since that class is being used with different divs, I need to change the property of the class I hover upon only and not the other ones. is that possible?

the html structure looks like this:

<div class="home_linkbox_href"><a href=""><div class="home_linkbox">
                    <h1>/h1>
                    <h2></h2>
                </div></a></div>

the javascript:

$(".home_linkbox_href a").hover(function(){
    //alert("u did it...");
    $(".home_linkbox_href a .home_linkbox").css("background-color", "#ffe500");

    },
    function(){
        $(".home_linkbox").css("background-color", "#000");
});

can someone help?

Answer 1

I think you would use $(this).

$(".home_linkbox_href a").hover(function(){
    $(this).css("background-color", "#ffe500");
    $(this).attr("href", "http://www.google.com");
    },
    function(){
        $(this).css("background-color", "#000");
});

Answer 2

You can specify this as the context for the selector, which will find matches only in the currently hovered element:

$(".home_linkbox_href a").hover(function(){
    //alert("u did it...");
    $(".home_linkbox", this).css("background-color", "#ffe500");

    },
    function(){
        $(".home_linkbox", this).css("background-color", "#000");
});

Answer 3

$(".home_linkbox_href").find("a").hover(
  function(){
    $(this).siblings(".home_linkbox").css("background-color", "#ffe500");
  },

  function(){
    $(this).siblings(".home_linkbox").css("background-color", "#000");
  }
);