outline 1 element only

Hi all i have the following code.


$(document).ready(function(){
$("ul, li, a, p, img").hover(
function(){
var origBorder = $(this).css("border");
var elementID = $(this).attr("id");
$(this).css("possition", "absolute").css("z-index", "100").css("border", "1px solid red");
},
function(){
$(this).css("border", "none").css("z-index", "1");
}
);
});


it is suposed to outline the element that i am hovering over. Yet if I hover over say an <li> it will outline the li and the ul. Any ideas on how to just outline the element im hovering over?

it is suposed to outline the element that i am hovering over. Yet if I hover over say an <li> it will outline the li and the ul. Any ideas on how to just outline the element im hovering over?

Well, list items can only be children of list elements so if you specify ul in the selectors of course it will also apply to the list of which the lis are children. What happens if you remove the ul selector from the function? Would that matter?

And on another note: You shouldn’t mix CSS with JS just as you shouldn’t mix CSS or JS with HTML with HTML. Better way would be to add a class to a certain element and write the styles applying to elements with that class in the stylesheet.

And for the records: In css("possition", "absolute") it should read “position” with single “s” only.