Question

HTML

<p id="para"> This is a paragraph</p>

JS/Jquery

$("para").hover(function() {$(this).hide();}, function() {$(this).show();}); 

Now what i am trying to is when mouse is over the paragraph, the element should hide and when mouse leaves the element is should be visible again. However neither the paragraph is hiding and hence not appearing back. What’s wrong here ?

Answer 1

You’re missing the # ID selector, having just “para” is looking for a tag <para> (which of course doesn’t exist in this case.

$("#para")

On a side note, you typically want to have some sort of div (of a set size let’s say) etc wrapped around a situation like this, and there is where the hover event is taken from, and the inner div shown. Makes it less “skippy”.

Also if you do it with a div it can be done with CSS:

div:hover #para { display:block; }

jsFiddle CSS example