# jQuery判断元素是否是鼠标划过（hover）状态

**URL:** <https://www.shiqidu.com/t/topic/158>\
**Category:** 开发调优\
**Tags:** jQuery\
**Created:** [2017 年3 月 15 日 09:44 UTC](https://www.shiqidu.com/t/topic/158 "2017-03-15T09:44:16Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

作者： ![Eureka](https://www.shiqidu.com/user_avatar/www.shiqidu.com/eureka/32/5_2.png) [@Eureka](https://www.shiqidu.com/u/Eureka)\
发布日期： [2017 年3 月 15 日 09:44 UTC](https://www.shiqidu.com/t/topic/158/1 "2017-03-15T09:44:16Z")

</div>

现在有个需求是鼠标划过父div，显示子元素ul，点击ul的子元素li的a标签，选中radio。其实就是自己实现一个下拉选择框。

**html代码如下**

```html
&lt;div class=&quot;yyjh_sel status_new_sel&quot;&gt;  
	&lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;yyjh&quot; value=&quot;1&quot;&gt;有意向/较好&lt;/label&gt;  
	&lt;ul class=&quot;child_sel&quot;&gt;  
		&lt;li name=&quot;g_status&quot; id=&quot;g_yyjh_status&quot;&gt;  
			&lt;option value=&quot;1&quot;&gt;有意向&lt;/option&gt;  
		&lt;/li&gt;  
	&lt;/ul&gt;  
&lt;/div&gt;  

```

**要实现的效果如下**

![](https://discourse.shiqidu.com/uploads_nj/article/2017-03-15/58c90a380124e.gif)

**逻辑分析**

鼠标放到`radio`上，显示ul，因为`child_sel`是绝对定位，所以在鼠标离开`radio`时，要判断下ul是否是`hover`状态，因为是使用jQuery,所以使用`is(':hover')`判断元素是否是hover状态。

**代码如下**

```javascript
$(document).on('mouseover mouseout','.status_new_sel',function (e) {  
        if(e.type == 'mouseover'){  
            $(this).children('.child_sel').show();  
            var _child_a = $(&quot;.child_sel&gt;li&gt;a&quot;);  
            //鼠标划过变色  
            _child_a.hover(function () {  
                $(this).parent('li').css('background-color', '#eee');  
            },function () {  
                $(this).parent('li').css('background-color', '#fff');  
            });  
            //点击选中父radio  
            _child_a.click(function () {  
                $(this).parent().parent().siblings('label').children('input[type=&quot;radio&quot;]').attr('checked','checked');  
                $(this).parent().parent('.child_sel').hide();  
            });  
        }else if (e.type == 'mouseout'){  
            var _this = $(this);  
            setTimeout(function () {  
                if (!_this.children('.child_sel').is(':hover')){  
                    _this.children('.child_sel').hide();  
                }  
            },500);  
        }  
    });  

```

初始效果有点丑，可以自己写css美化下。

---

<div class="post-metadata">

作者： ![aijquery](https://www.shiqidu.com/letter_avatar_proxy/v4/letter/a/22d042/32.png) [@aijquery](https://www.shiqidu.com/u/aijquery)\
发布日期： [2019 年3 月 7 日 05:40 UTC](https://www.shiqidu.com/t/topic/158/2 "2019-03-07T05:40:16Z")

</div>

[www.aijquery.cn](http://www.aijquery.cn) 求交换

---

<div class="post-metadata">

作者： ![Eureka](https://www.shiqidu.com/user_avatar/www.shiqidu.com/eureka/32/5_2.png) [@Eureka](https://www.shiqidu.com/u/Eureka)\
发布日期： [2019 年3 月 7 日 05:46 UTC](https://www.shiqidu.com/t/topic/158/3 "2019-03-07T05:46:00Z")

</div>

[https://www.shiqidu.com/friend-link.html](https://www.shiqidu.com/friend-link.html), 这里申请下, 朋友。