Html 在 Hover 上选择框选项？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4599975/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Html Select box options on Hover?
提问by John
I've seen this very simple selectbox on youtube, where the select options are visible on hover (instead of clicking), as seen in following screenshot.
我在 youtube 上看到了这个非常简单的选择框，其中选择选项在悬停（而不是单击）时可见，如下面的屏幕截图所示。
I'm trying to create similar effect in the following simple select box. Can someone please help how this can be done? Thanks.
我正在尝试在以下简单的选择框中创建类似的效果。有人可以帮助如何做到这一点吗？谢谢。
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
回答by David says reinstate Monica
Here's one way of doing it, though I'd prefer a more plug-in approach (rather than hard-coding the html ul):
这是一种方法，尽管我更喜欢使用更多插件的方法（而不是硬编码 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).
});
Editedto include an alertdemonstrating the changes in the selectelement's value: JS Fiddle demo.
编辑以包括alert演示select元素值的变化：JS Fiddle demo。
Editedto include the css and html used in the demo:
编辑以包含演示中使用的 css 和 html：
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:
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;
}
This causes the menu to hide the unselecteditems until the ulis hovered over, then revealing all the options, and uses the click()event to assign the unselectedclass name to the non-clicked elements; which allows the clicked element to be still visible on mouseout.
这会导致菜单隐藏unselected项目，直到ul鼠标悬停在 ，然后显示所有选项，并使用click()事件将unselected类名分配给未单击的元素；这允许单击的元素在鼠标移开时仍然可见。
The above CSS reflects the most-recent edit, to make the currently-selected, and :hover-ed, limore visible.
上面的 CSS 反映了最近的编辑，使当前选择的和:hover-edli更加可见。
Editedbecause, well, I got a little bored. And had nothing better to do, so I made a simple plug-in:
编辑是因为，好吧，我有点无聊。又无事可做，于是做了一个简单的插件：
(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'.
Notes:
笔记：
- This isn't absolutely positioned, so if you have more than one
select(which you can certainly do, and works okay) it doesscrew with the page-flow a little (or a lot), but this can be amended in the CSS (I'd imagine, though I've not yet tried). - It could probably do with some options, possibly allowing
dlelements to be used in place of the currentul, which would allow for giving an explanation of the available options. - I suspect that it could be optimised a great deal more than it currently is, but I'm not, off-hand, sure how. Possibly some sleep and, late, browsing the jQuery APImight offer some insights (though if anyone sees anything obvious please leave a comment! Or take the JS Fiddleand, for want of a better term, fork it (though I'd obviously appreciate links to any subsequent forks/updates).
- I'm not entirely sure what licensing options are available to me (since everything on SO is Creative Commons cc-by-sa, according to Jeff Atwood, and the footerof this site, anyway), but for what it's worth I'm quite happy for anyone to take the above and, well, do whatever you like with it (if it's of any use, have fun!).
- 这不是绝对定位的，所以如果你有多个
select（你当然可以做，并且工作正常）它确实会稍微（或很多）扭曲页面流，但这可以在 CSS 中修改（我可以想象，虽然我还没有尝试过）。 - 它可能与一些选项有关，可能允许使用
dl元素代替当前ul，这将允许对可用选项进行解释。 - 我怀疑它可以比目前优化得更多，但我不确定如何。可能睡了一会儿，再晚一点，浏览jQuery API可能会提供一些见解（尽管如果有人看到任何明显的东西，请发表评论！或者使用JS Fiddle，如果想要一个更好的术语，将它分叉（尽管我显然很感激）任何后续分支/更新的链接）。
- 我不完全确定我可以使用哪些许可选项（因为 SO 上的所有内容都是Creative Commons cc-by-sa，根据Jeff Atwood和本网站的页脚，无论如何），但对于它的价值，我很高兴任何人接受上述内容，并且可以随心所欲地使用它（如果它有任何用处，请玩得开心！）。
Editedbecause I felt that there should be a visible 'guidance' element, and also to try and explain something of how it all works.
编辑是因为我觉得应该有一个可见的“指导”元素，并尝试解释它是如何工作的。
Given the html:
鉴于 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>
Use the jQuery to call the plugin:
使用 jQuery 调用插件：
$('#sizes').selectUl();
This takes the above select, and creates a ulwith the following mark-up:
这需要上面的选择，并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>
The CSS used (in the demo):
使用的 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;
}
回答by Marcus Whybrow
It is impossible to open a selectbox in the plain way your are describing. It is no coincidence that the image you have provided looks nothing like a normal select box. This is because it is probably actually a ullist which is styled to look as it does, revealing itself on hover, which is actually possible.
以select您描述的简单方式打开盒子是不可能的。您提供的图像看起来与普通的选择框完全不同，这并非巧合。这是因为它实际上可能是一个ul列表，它的样式看起来就像它一样，在悬停时显示自己，这实际上是可能的。
I created an example over on jsfiddleof how it could be done.
我在 jsfiddle上创建了一个关于如何完成的示例。
回答by JakeParis
If you're interested in doing it this way, I've got a simple, non-javascript way of doing it on my current projectactually (look at the "I Want To" menu at the top). Like @Marcus said, this is not with a select box, but is done with a unordered list (<ul>).
如果你有兴趣这样做，我有一个简单的、非 JavaScript 的方法来在我当前的项目中做这件事（查看顶部的“我想要”菜单）。就像@Marcus 所说的，这不是使用选择框，而是使用无序列表 ( <ul>) 完成的。
The html is straightforward:
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>
the important part is the css, essentially just the first 2 rules. The div appears to expand because of the overflow:visibleon :hover.
重要的部分是 css，基本上只是前 2 条规则。由于overflow:visibleon ，div 似乎扩大了: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
}
回答by Bob Gregor
Link to the updated jquery plugin Forked $.selectUI plugin
链接到更新的 jquery 插件Forked $.selectUI 插件
- Fixes iteration over multiple elements passed in
- 修复对传入的多个元素的迭代
回答by Adrian
At work at the moment so can't check youtube but from the styling I am guessing that that "select" control is not an actual select control. Most likely it is implemented like a navigational drop down menu but instead of navigating to a url on click it replaces the contents and value of an input label. Then on form submit it can pick up the value of the label.
目前正在工作，因此无法检查 youtube，但从样式中我猜测“选择”控件不是实际的选择控件。它很可能像导航下拉菜单一样实现，但不是在单击时导航到 url，而是替换输入标签的内容和值。然后在表单提交时它可以获取标签的值。
