jquery hover 超过一个元素，突出显示所有元素

Question

When I hover over one element, all of them are highlighted, here is my code:

$(document).ready(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

Answer 1

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;
}

Answer 2

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");
        });

Answer 3

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/