Reputation: 10261
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?
Upvotes: 0
Views: 81
Reputation: 14967
$(".home_linkbox_href").find("a").hover(
function(){
$(this).siblings(".home_linkbox").css("background-color", "#ffe500");
},
function(){
$(this).siblings(".home_linkbox").css("background-color", "#000");
}
);
Upvotes: 0
Reputation: 344517
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");
});
Upvotes: 0
Reputation: 6178
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");
});
Upvotes: 4