0

我有 2 个用户名/密码文本字段<li>。在下拉列表中显示文本字段:hover。<li>当用户单击文本字段时，我希望<li>拥有伪类:hover，因此如果鼠标移到 contianing 之外，这些字段仍然可见<li>。

我已经尝试过这段代码，但它不起作用。

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

这是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>

JavaScript 是错误的还是可能与其他 JavaScript 冲突？
此外，它是否很容易让它变得如此“点击<div>使:hover消失，从而隐藏<li>？

4

2 回答 2

0

我已经尝试过这段代码，但它不起作用

不确定什么是“不工作”，但我会以不同的方式实现行为：

点击时触发“悬停”对我来说似乎不合适。如果“悬停状态”并不意味着鼠标悬停在元素上，代码将变得模糊。

代码将更具可读性/逻辑性，只需在点击事件上切换 LI 的可见性。

$('#username').on('click',function() {
    $('#li').toggle();
});
于 2013-11-01T12:50:48.143 回答
0

我想错了。显然 CSS 伪选择器不能像我尝试的那样选择。
这是对其他任何人的解释http://forum.jquery.com/topic/jquery-triggering-css-pseudo-selectors-like-hover

这最终起作用了：

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

});

并在单击时隐藏：如何检测元素外部的单击？

<script>
$('html').click(function() {
$('#li').removeClass('psuedoClassProperty');
});
$('#li').click(function(event){
event.stopPropagation();
});
</script>
于 2013-11-01T14:53:54.797 回答