我在 youtube 上看到了这个非常简单的选择框，其中选择选项在悬停时可见（而不是单击），如下面的屏幕截图所示。
我正在尝试在以下简单的选择框中创建类似的效果。有人可以帮助如何做到这一点吗？谢谢。
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
【问题讨论】：
标签： html css html-select
这是一种方法，虽然我更喜欢插件化的方法（而不是硬编码 html ul）：
$('#selectUl li:not(":first")').addClass('unselected');
// Used to hide the 'unselected' elements in the ul.
$('#selectUl').hover(
function(){
// mouse-over
$(this).find('li').click(
function(){
$('.unselected').removeClass('unselected');
// removes the 'unselected' style
$(this).siblings('li').addClass('unselected');
// adds 'unselected' style to all other li elements
var index = $(this).index();
$('select option:selected').removeAttr('selected');
// deselects the previously-chosen option in the select
$('select[name=size]')
.find('option:eq(' + index + ')')
.attr('selected',true);
// assumes a 1:1 relationship between the li and option elements
});
},
function(){
// mouseout (or mouseleave, if they're different, I can't remember).
});
编辑包含一个alert，展示select元素值的变化：JS Fiddle demo。
编辑以包含演示中使用的 css 和 html：
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<ul id="selectUl">
<li>small</li>
<li>medium</li>
<li>large</li>
</ul>
select {
opacity: 0.5;
}
ul {
width: 8em;
line-height: 2em;
}
li {
display: list-item;
width: 100%;
height: 2em;
border:1px solid #ccc;
border-top-width: 0;
text-indent: 1em;
background-color: #f90;
}
li:first-child {
border-top-width: 1px;
}
li.unselected {
display: none;
background-color: #fff;
}
ul#selectUl:hover li.unselected {
background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
display: list-item;
}
ul#selectUl:hover li {
background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
background-color: #f90;
}
这会导致菜单隐藏unselected 项目，直到ul 悬停在上方，然后显示所有选项，并使用click() 事件将unselected 类名称分配给未单击的元素;这允许单击的元素在 mouseout 时仍然可见。
上面的 CSS 反映了最近的编辑，以使当前选择的和:hover-ed、li 更加可见。
已编辑，因为，好吧，我有点无聊。也无事可做，所以做了一个简单的插件：
(function($) {
$.fn.selectUl = function(){
var $origSelect = $(this);
var newId = $(this).attr('name') + '-ul';
var numOptions = $(this).children().length;
$('<ul id="' + newId + '" class="plainSelect" />')
.insertAfter($(this));
for (var i = 0; i < numOptions; i++) {
var text = $(this).find('option').eq(i).text();
$('<li />').text(text).appendTo('#' + newId);
}
if ($(this).find('option:selected')) {
var selected = $(this).find('option:selected').index();
$('#' + newId)
.find('li')
.not(':eq(' + selected + ')')
.addClass('unselected');
}
$('#' + newId + ' li')
.hover(
function(){
$(this).click(
function(){
var newSelect = $(this).index();
$(this)
.parent()
.find('.unselected')
.removeClass('unselected');
$(this)
.parent()
.find('li')
.not(this)
.addClass('unselected');
$($origSelect)
.find('option:selected')
.removeAttr('selected');
$($origSelect)
.find('option:eq(' + newSelect + ')')
.attr('selected',true);
});
},
function(){
});
// assuming that you don't want the 'select' visible:
$(this).hide();
return $(this);
}
})(jQuery);
$('#sizes').selectUl();
JS Fiddle demo, including the 'plug-in'.
注意事项：
select（您当然可以这样做，并且工作正常），它确实会稍微影响页面流（或很多），但这可以在 CSS 中修改（我想，虽然我还没有尝试过）。dl 元素代替当前的ul，这将允许对可用选项进行解释。已编辑，因为我觉得应该有一个可见的“指导”元素，并尝试解释它是如何运作的。
给定html：
<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
<option value="xxs">XX-Small</option>
<option value="xs">X-Small</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
<option value="xl">X-Large</option>
<option value="xxl">XX-Large</option>
</select>
使用jQuery调用插件：
$('#sizes').selectUl();
这采用上面的选择，并创建一个带有以下标记的ul：
<ul id="sizes-ul" class="plainSelect">
<li class="guidance">Select a size:</li>
<li>XX-Small</li>
<li class="unselected">X-Small</li>
<li class="unselected">Small</li>
<li class="unselected">Medium</li>
<li class="unselected">Large</li>
<li class="unselected">X-Large</li>
<li class="unselected">XX-Large</li>
</ul>
使用的 CSS（在演示中）：
ul.plainSelect {
/* targets those 'ul' elements created by the plug-in */
border: 1px solid #000;
}
ul.plainSelect li {
/* this styles the 'selected' li 'option' element */
background-color: #f90;
display: list-item;
}
ul.plainSelect li.guidance {
/* this is the 'Select a Reason' guidance/explanation from the image in the question */
border-bottom: 1px solid #000;
padding: 0.3em;
font-weight: bold;
font-size: 1.2em;
background-color: #fff;
}
ul.plainSelect li.unselected {
/* hides the 'unselected' options, and removes the background-color for contrast */
background-color: #fff;
display: none;
}
ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
/* ensures that the 'li' elements pop-up when the list is hovered over, */
/* and act/display like 'li' elements */
display: list-item;
}
【讨论】：
不可能以您所描述的简单方式打开select 框。您提供的图像看起来与普通的选择框完全不同，这并非巧合。这是因为它实际上可能是一个 ul 列表，它的样式看起来和它一样，在悬停时会显示自己，这实际上是可能的。
我创建了一个示例 over on jsfiddle 来说明如何做到这一点。
【讨论】：
如果您有兴趣这样做，我实际上在my current project 上提供了一种简单的非 JavaScript 方法（请查看顶部的“我想要”菜单）。就像@Marcus 所说，这不是使用选择框，而是使用无序列表 (<ul>)。
html 很简单：
<div id="iWantToMenuContainer">
<ul id="i-want-to" class="menu">
<li><a href="http://cumberlandme.info/contact">contact the town office</a></li>
<li><a href="http://cumberlandme.info/upcoming-events">find out what’s happening</a></li>
<li><a href="http://cumberlandme.info/online-services">get permits and services applications</a></li>
</ul>
</div>
重要的部分是 css，本质上只是前两条规则。由于:hover 上的overflow:visible，div 似乎扩展了。
#iWantToMenuContainer {
overflow:hidden;
}
#iWantToMenuContainer:hover {
overflow:visible
}
#iWantToMenuContainer ul {
border:1px solid #b6c2b9;
background:#fff;
padding:1px 20px 3px 5px
}
#iWantToMenuContainer a:link,#iWantToMenuContainer a:visited {
display:block;
background: #fff;
}
#iWantToMenuContainer a:hover {
background:#e6e6e6
}
【讨论】：
a:hover 的背景颜色略有不同，以显示您正在鼠标悬停的内容...
目前在工作，所以无法查看 youtube，但从样式来看，我猜测“选择”控件不是实际的选择控件。它很可能像导航下拉菜单一样实现，但不是在单击时导航到 url，而是替换输入标签的内容和值。然后在表单提交时，它可以获取标签的值。
【讨论】：
链接到更新的jquery插件Forked $.selectUI plugin
【讨论】：