jQuery-包含文本的嵌套鼠标悬停的onClick <li> 下拉式菜单

Question

I have 2 username/password text fields inside of <li> . On :hover of the <li> the drop down appears showing the text fields. When the user clicks on the text fields, I want the <li> to have the pseudo class :hover so the the fields remain visible if the mouse is moved outside of the contianing <li> .

I've tried this code but it doesn't work.

<script>$('#username').on('click',function() {
    $('#li').trigger('hover');});
</script>    

Here is the HTML

<li id="li"><a href="#">Register</a></li>
   <p>Or Login Below</p>
 <form method="post" action="#" name="loginform" id="loginform" class="myClass">
<fieldset>
    <input value="username" type="text" name="username" id="username" onclick="this.value=''" class="left" />
    <input value="password" type="password" name="password" id="password" onclick="this.value=''" class="left" />
    <input type="submit" name="login" id="login2" value="Login" />
</fieldset>
</form>  
</li>

Is the JavaScript wrong or is it possibly conflicting with other JavaScript?
Also, would it be easy to make it so 'clicking of the <div> makes the :hover go away, thus hiding the <li> ?

Answer 1

I've tried this code but it doesn't work

Not sure what is "not working" but I would implement the behavior differently:

Triggering 'hover' on click doesn't seem right to me. Code will become fuzzy if the 'hover state' doesn't mean the mouse is hovering of an element.

The code will be more readable/logic to just toggle the visibility of the LI on the click event.

$('#username').on('click',function() {
    $('#li').toggle();
});

Answer 2

I was going about this wrong. Apparently CSS psuedo-selectors cannot be selected the way I was trying.
Here is an explanation for anyone else http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

This ended up working:

<script>$('#username').click(function() {
$('#li').addClass('psuedoClassProperty'); // adds the CSS to display        

});

and to hide when clicked off: How do I detect a click outside an element?

<script>
$('html').click(function() {
$('#li').removeClass('psuedoClassProperty');
});
$('#li').click(function(event){
event.stopPropagation();
});
</script>