jQuery判断元素是否是鼠标划过（hover）状态 - 十七度

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

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;

要实现的效果如下

逻辑分析

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

代码如下

$(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美化下。