现在有个需求是鼠标划过父div，显示子元素ul，点击ul的子元素li的a标签，选中radio。其实就是自己实现一个下拉选择框。
html代码如下
<div class="yyjh_sel status_new_sel">
<label><input type="radio" name="yyjh" value="1">有意向/较好</label>
<ul class="child_sel">
<li name="g_status" id="g_yyjh_status">
<option value="1">有意向</option>
</li>
</ul>
</div>
要实现的效果如下
逻辑分析
鼠标放到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 = $(".child_sel>li>a");
//鼠标划过变色
_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="radio"]').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美化下。