Javascript 在网页上，如何在悬停时显示更改为下拉框的标签

我想在屏幕上看到一个标签，当鼠标指针悬停在上面时，它会变成一个下拉列表

我有以下几点

<div class="sizeit"> 
    <select id="SelectUrgency" class="invisible">
        <option value="3">Non Urgent</option>
        <option value="2">Urgent</option>
        <option value="1">System Down</option>
    </select>
    <label>test</label>
<div>

还有下面的javascript

$("div").hover(  function () {    $(this).find("label:first").remove();  },  
              function () {    $(this).append($("<label>test</label>"));  });

$("div.sizeit").mouseover(function(){
        $(this).find("select:first").addClass("visible");
    }).mouseout(function(){
        $(this).find("select:first").removeClass("visible");    
        $(this).find("select:first").addClass("invisible"); 
    });

$（“div”）.hover（函数（）{$（this）.find（“label:first”）.remove（）；}，
函数（）{$（this.append（$（“test”）；}）；
$（“div.sizeit”）.mouseover（函数（）{
$（this）.find（“select:first”）.addClass（“visible”）；
}).mouseout（函数（）{
$（this.find（“select:first”）.removeClass（“visible”）；
$（this）.find（“select:first”）.addClass（“不可见”）；
});

这几乎起作用，但当点击下拉框时，我无法选择项目。有人知道如何解决这个问题，以便选择下拉框项目吗？

试试这个提琴：

HTML:

：焦点规则将防止selectbox消失

---

希望这是一个很好的解决方案

我不确定这里是否会发生这种情况。我遇到了一个问题，当事情不工作，如果他们隐藏在一开始。尝试在没有这个隐藏类的情况下加载它，然后在body onload中添加一个函数来设置隐藏框的类。谢谢，它正是我所要求的。但是假设当用户从下拉列表中选择一个项目时，我如何使它变为不可见，并且标签返回的内容与所选项目一起更新？尝试类似$（“.sizeit>select”）.change（function（）{text=$（this.val（）；$（this.parent（）.find（'label'）.text（text）；}）；再次感谢你。我将它稍微更改为$（“.sizeit>select”）.change（函数（）{text=$（this.find（“[value=“+$（this.val（）+”]）））.text（）$（this.parent（）.find（'label'）.text（text）；}）；

$("div").hover(  function () {    $(this).find("label:first").remove();  },  
              function () {    $(this).append($("<label>test</label>"));  });

$("div.sizeit").mouseover(function(){
        $(this).find("select:first").addClass("visible");
    }).mouseout(function(){
        $(this).find("select:first").removeClass("visible");    
        $(this).find("select:first").addClass("invisible"); 
    });

<div class="sizeit"> 
<select id="SelectUrgency" class="invisible">
    <option value="3">Non Urgent</option>
    <option value="2">Urgent</option>
    <option value="1">System Down</option>
</select>
<label>test</label>

.sizeit > select {
    display:none;
}
.sizeit > label {
    display:block;
}
.sizeit > select:focus, .sizeit:hover > select {
    display:block;
}
.sizeit > select:focus + label, .sizeit:hover > label {
    display:none;
}