悬停时的 Html 选择框选项?
我在 youtube 上看到过这个非常简单的选择框,其中选择选项在悬停时可见(而不是单击),如下面的屏幕截图所示。
我试图在下面的简单选择框中创建类似的效果。有人可以帮忙如何做到这一点吗?谢谢。
<select name="size">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
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.
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
这是一种方法,但我更喜欢一种更多的插件方法(而不是硬编码 html
ul
):JS Fiddle 演示。
编辑以包含一个
alert
,演示select
元素值的更改:JS Fiddle 演示。编辑以包含演示中使用的 css 和 html:
html
css:
这会导致菜单隐藏
未选择的
项目,直到ul
悬停结束,然后显示所有选项,并使用click()
事件将unselected
类名分配给未单击的元素;这允许单击的元素在鼠标移出时仍然可见。上面的 CSS 反映了最近的编辑,以使当前选定的、
:hover
-ed、li
更加可见。最新 JS Fiddle 演示。
编辑因为,嗯,我有点无聊。没有更好的事情可做,所以我做了一个简单的插件:
JS Fiddle 演示,包括 'plug -in'。
注意:
select
(您当然可以这样做,并且工作正常),它确实会扰乱页面流一点(或很多),但这可以在CSS中修改(我想,虽然我还没有尝试过)。<强>编辑因为我觉得应该有一个可见的“指导”元素,并尝试解释它是如何运作的。
给定 html:
使用 jQuery 调用插件:
这需要上面的选择,并创建一个带有以下标记的
ul
:使用的 CSS(在演示中):
JS Fiddle 演示。
Here's one way of doing it, though I'd prefer a more plug-in approach (rather than hard-coding the html
ul
):JS Fiddle demo.
Edited to include an
alert
demonstrating the changes in theselect
element's value: JS Fiddle demo.Edited to include the css and html used in the demo:
html
css:
This causes the menu to hide the
unselected
items until theul
is hovered over, then revealing all the options, and uses theclick()
event to assign theunselected
class name to the non-clicked elements; which allows the clicked element to be still visible on mouseout.The above CSS reflects the most-recent edit, to make the currently-selected, and
:hover
-ed,li
more visible.Latest JS Fiddle demo.
Edited because, well, I got a little bored. And had nothing better to do, so I made a simple plug-in:
JS Fiddle demo, including the 'plug-in'.
Notes:
select
(which you can certainly do, and works okay) it does screw 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).dl
elements to be used in place of the currentul
, which would allow for giving an explanation of the available options.Edited because 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:
Use the jQuery to call the plugin:
This takes the above select, and creates a
ul
with the following mark-up:The CSS used (in the demo):
JS Fiddle demo.
以您所描述的简单方式打开
选择
框是不可能的。您提供的图像看起来一点也不像普通的选择框,这并非巧合。这是因为它实际上可能是一个ul
列表,其样式看起来就像它一样,在悬停时显示自己,这实际上是可能的。我在 jsfiddle 上创建了一个示例 over on jsfiddle 来说明如何完成此操作。
It is impossible to open a
select
box 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 aul
list which is styled to look as it does, revealing itself on hover, which is actually possible.I created an example over on jsfiddle of how it could be done.
如果您有兴趣这样做,我有一个简单的非 JavaScript 方法可以在我当前的项目 实际上(查看顶部的“我想要”菜单)。就像@Marcus所说,这不是使用选择框,而是使用无序列表(
)完成的。
html 很简单:
重要的部分是 css,本质上只是前 2 条规则。由于
:hover
上的overflow:visible
,div 似乎展开了。If you're interested in doing it this way, I've got a simple, non-javascript way of doing it on my current project actually (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>
).The html is straightforward:
the important part is the css, essentially just the first 2 rules. The div appears to expand because of the
overflow:visible
on:hover
.目前正在工作,所以无法检查 youtube,但从样式来看,我猜测“选择”控件不是实际的选择控件。它很可能像导航下拉菜单一样实现,但不是在单击时导航到 url,而是替换输入标签的内容和值。然后在表单提交时它可以获取标签的值。
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.
链接到更新的 jquery 插件 分叉 $.selectUI 插件
Link to the updated jquery plugin Forked $.selectUI plugin