鼠标经过显示下拉选择下拉

这个可以在css通过

<div class=" left-height select-type-relative">
<div class="select-type-content">
<div class="select-type">
<span>所属类型</span>
<img src="images/icon/three.png" alt="" class="arrow"/>
</div>

<input name="type" value="" type="hidden" id="type">
<ul class="select-type-absolute">
     <li data-value="0">官方</li>
     <li data-value="1">非官方</li>
                      </ul>
</div>
</div>

.select-type-relative{
position:relative;
}

.select-type {
    margin-right: 10px;
    cursor: pointer;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    width: 120px;
    padding-left: 20px;
    border: 1px solid #dadada;
    color: #7c7e7f;
    box-sizing: border-box;
    font-size:14px;
    background-color: #fff;
}

.select-type-content:hover .select-type{background: #ebf1fa;}
.select-type-content:hover .select-type .arrow{   //鼠标滑过让这个箭头图标旋转180度
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}

/*下拉框*/
.select-type-absolute{
position: absolute;
    background: #fff;
    border: 1px solid #dadada;
    border-radius: 4px;
    left:0px;
    top: 40px;
    display: none;
    z-index: 222;
}

.select-type-absolute li {
    width: 120px;
    height: 34px;
    line-height: 34px;
    padding-left: 25px;
    cursor: pointer;
}
.select-type-absolute li:hover {
    background: #ebf1fa;
}

.show{display:block;}

.hide{display:none;}

   选择一个后效果：

考虑鼠标滑过所属类型，下面的下拉框官方和非官方显示。鼠标移动到下面下拉框上面后下拉框一直是显示的状态。选择内容后下拉框隐藏。

最开始的思路：通过鼠标滑过，他之内的某个子元素可以再css里面设置显示或者隐藏。

下拉内容开始是隐藏的，只有滑过上面内容才显示，划出时看到是否在下拉上，在下拉上就显示，不在就隐藏。

.select-type-absolute{display:none;}

select-type-content:hover .select-type-absolute{display:block;}

鼠标移到下拉内容上它是显示的，移出就隐藏。

.select-type-absolute:hover{display:block;}

但是这样写完以后你会发现 可能会有问题：下拉框和上面内容有距离，一旦离开上面的“所属类型”，他就隐藏了，而此时你也不在下拉上所以还是同样隐藏。你要么让下拉内容和上面没有一点点距离的。 要么把上面的那个高度增加

.select-type-content {
    height: 54px;
}

这样即使看起来有距离但实际没有的，select-type-content高度增加他即使在外面也没有移出select-type-content的范围的。

但是你选择下拉内容时，选好后就隐藏下拉，这时就会有问题了。

$(".select-type-absolute li").click(function(){
$(this).parent(".select-type-absolute").siblings(".select-type").find("span").html($(this).text());  //获取选择的内容
       $(this).parent(".select-type-absolute").addClass("hide"); //隐藏下拉框 

问题就在上面画删除线的地方，我们在css里面写的你鼠标在这个.select-type-absolute下拉框上面就会显示下拉内容的，你这里选择下拉后还是在上面所以他会是显示的。可是你在js里面希望他隐藏就冲突了，他还是会显示。直到你移出了下拉。而且你一旦点击选择某个下拉后你再去经过这个内容他的下拉就一直处在隐藏的状态不能重新选择了。

})

所以我们只能用js来写了他的鼠标进入移出时的显示隐藏状态了

//鼠标滑过所属类型
$(".select-type-content").hover(function(){
$(this).find(".select-type-absolute").addClass("show").removeClass("hide");
},function(){
$(this).find(".select-type-absolute").addClass("hide").removeClass("show");
});

// 下拉选择内容
$(".select-type-absolute li").click(function(){
$(this).parent(".select-type-absolute").siblings("input").val($(this).attr("data-value"));
$(this).parent(".select-type-absolute").siblings(".select-type").find("span").html($(this).text());
        $(this).parent(".select-type-absolute").removeClass("show").addClass("hide");
})