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

Question

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

我有以下

<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>

使用以下CSS

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}
.visible {
    visibility: visible;
    position: static;
}
.sizeit {
    width: 100px;
    height: 440px;
    border: 1px solid black;
}

和下面的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"); 
    });

这几乎可以工作，但是当单击下拉框时，我无法选择一个项目。有谁知道如何解决这个问题，以便可以选择下拉框项目？

Answer 1

试试这个小提琴：http: //jsfiddle.net/aKh5x/

HTML：

<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>

CSS：

.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;
}

:focus 规则将防止选择框消失。

希望这对您来说是一个很好的解决方案