Html在悬停上选择框选项？
我在YouTube上看到了这个非常简单的选择框，其中选择选项在悬停（而不是单击）上可见，如下面的截图所示。
我试图在下面的简单选择框中创建类似的效果。 有人可以帮助如何做到这一点？ 谢谢。
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</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).
});
JS Fiddle演示。
编辑包含一个alert演示select元素值的变化：JS Fiddle演示。
编辑包含演示中使用的css和html：
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>
CSS：
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类名称分配给unselected单击的元素; 它允许点击的元素在mouseout上仍然可见。
上面的CSS反映了最近的编辑，使得当前选定的和:hover li更加可见。
最新的JS Fiddle演示。
编辑，因为，我有点无聊。 并没有更好的办法，所以我做了一个简单的插件：
(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演示，包括'插件'。
笔记：
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;
}
JS Fiddle演示。
用你描述的简单方式打开select框是不可能的。 这不是巧合，你提供的图像看起来不像一个正常的选择框。 这是因为它实际上可能是一个ul列表，它的样式看起来就像它一样，在悬停时显示它自己，这实际上是可能的。
我创建了一个关于如何完成的例子。
如果你对这样做感兴趣，我实际上已经在我的当前项目中使用了一种简单的非JavaScript方式（请看顶部的“我想要”菜单）。 像@马库斯说的，这不是用选择框，而是用无序列表（ <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，基本上只是前两条规则。 由于overflow:visible ，div似乎展开overflow:visible于:hover 。
#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
}