When I hover over one element, all of them are highlighted, here is my code:
$(document).re开发者_运维知识库ady(function(){
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","transparent");
});
I was wondering if I could highlight only one at a time instead of adding a class manually to each one
you are targeting every p
in the document. you need to restrict it
EDIT: removed first part of answer
answer provided by @littletipz is much better. second part still stands though...
OR a CSS only example
http://jsfiddle.net/bvsTg/
p:hover {
background-color: yellow;
}
try use $(this)
insted of
$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","transparent"); });
use
$("p").hover(function(){
$(this).css("background-color","yellow");
},function(){
$(this).css("background-color","transparent");
});
If you dont want to have effects to all elements at once, you can use this stop function:
$("p").hover(function(){
$(this).stop().css("background-color","yellow");
},function(){
$(this).stop().css("background-color","transparent");
});
http://api.jquery.com/stop/
精彩评论