Question: If I have a jquery script that shows and hides an element when hover, how do I make my element thats supposed to hide stay displayed if I click on it?

```
$(selector).hover(function(){
//this shows the element on mousein
     $(element).show();
     $(element).click(function(){
            $(this).css({'display':'list-item'});
     });
},function(){
//this hides element on mouseout
     $(element).hide();
}

```

The reason its list-item, its because this element I'm clicking is a `<li>` tag. I believe this is why it should be `list-item` and not `block`? Also, When I just do `alert($(element).css('display'));` within the click function, it shows list-item.

Answer: 
Try this code on div:

```
$(".comment_div").hover( 
     function() { $(this).children(".comment_actions").show(); }, 
     function() { $(this).children(".comment_actions").hide(); } 
 ).click(
     function(){ $(this).children(".comment_actions").show(); }
 ); 

```
I would add a class stating whether or not the element has been clicked.

```
$(element).click(function () {
    $(this).toggleClass('clicked');
});

```