Hover上选择框选项？ [英] Html Select box options on Hover?

问题描述

我在youtube上看到这个非常简单的选择框，其中选择选项在悬停（而不是点击）时可见。如下面的截图所示。

img src =https://i.stack.imgur.com/HiMFW.pngalt =alt text>

我试图创建类似的效果在下面的简单选择框中。有人可以请帮忙怎么做？感谢。

 < select name =size> 
< option value =small>小< / option> 
< option value =medium>中< / option> 
< option value =large>大< / option> 
< / select> 
  

解决方案

这里有一种方法，更喜欢更多的插件方法（而不是硬编码html ul ）：

 code> $（'＃selectUl li：not（：first）'）。addClass（'unselected'）; 
 //用于隐藏ul中的'unselected'元素。 
 
 $（'＃selectUl'）。hover（
 function（）{
 //鼠标悬停
 $（this）.find .bick（
 function（）{
 $（'。unselected'）。removeClass（'unselected'）; 
 //删除'unselected'风格
 
 
添加未选择样式给所有其他li元素
 
 var index = $（this）$（this）.siblings（'li'）。addClass（'unselected' .index（）; 
 $（'select option：selected'）removeAttr（'selected'）; 
 //取消选择以前选择的选项
 
 $ （'select [name = size]'）
 .find（'option：eq（'+ index +'）'）
 .attr（'selected'，true）; 
假定li和option元素之间有1：1的关系
}）; 
}，
 function（）{
 // mouseout（或mouseleave，我不记得了）。
}）; 
  

c> alert 显示选择元素值的变化： JS Fiddle演示。

---

在演示中使用的css和html：

html

  ; select name =size> 
< option value =small>小< / option> 
< option value =medium>中< / option> 
< option value =large>大< / option> 
< / select> 
 
< ul id =selectUl> 
< li>小< / li> 
< li> medium< / li> 
< li>大< / li> 
< / ul> 
  

css：

 code> select {
 opacity：0.5; 
}¥b $ b 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; 
} 
  

这将使菜单隐藏未选择项目，直到 ul 被悬停，然后显示所有选项，并使用 click（） 将未选择的类名分配给未点击的元素;

上面的CSS反映了最近的编辑，使当前选择的元素和：hover -ed， li 更显眼。

最新的JS小提琴演示。

---

已编辑，因为，我有点无聊。没有更好的办法，所以我做了一个简单的插件：

 （function（$）{
 $ .fn.selectUl = function（）{
 var $ origSelect = $（this）; 
 var newId = $（this）.attr（'name'）+'-ul'; 
 var numOptions = $（this）.children（）。length; 
 
 $（'< ul id ='+ newId +'class =plainSelect/& $ b .insertAfter（$（this））; 
 
 for（var i = 0; i  var text = $（this）.find '）.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）。点击（
 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（）{
}）; 
 //假设你不想让'select'可见：
 $（this）.hide（）; 
 
 return $（this）; 
} 
}）（jQuery）; 
 
 
 $（'＃sizes'）。selectUl（）; 
  

注意：

• 这不是绝对定位的，所以如果你有多个选择（你当然可以做，工作正常） / em>与页面流一点点（或很多），但这可以在CSS中修改（我想象，虽然我还没有尝试）。


• 它可能会使用一些选项，可能允许使用 dl 元素来代替当前的 ul


• 我怀疑它可以优化比现在更多，但我不是，亲手，确定如何。可能有一些睡眠，迟到，浏览 jQuery API 可能会提供一些见解（虽然如果任何人看到任何明显的东西，请留下评论！或者 JS Fiddle ，并且为了更好的术语，fork它（虽然我明显赞赏链接到任何后续分叉/更新）。


• 我不完全确定我可以使用什么授权选项（因为SO上的一切都 Creative Commons cc-by-sa ，根据 Jeff Atwood 和此网站的页脚，仍然 ），但是对于什么是值得的我很高兴任何人采取上述，以及，做任何你喜欢的东西（如果它是任何用途，有乐趣！）

---

已编辑，因为我认为应该有一个可见的指导元素，

 <$ c> 
 $ c>< select name =sizesid =sizesclass =makePlaintitle =Select a size：> 
< option value =xxs> XX-小< / option> 
< option value =xs> X小< / option> 
< option value =s>小< / option> 
< option value =m>中< / option> 
< option value =l>大< / option> 
< option value =xl> X-Large< / option> 
< option value =xxl> XX-Large< / option> 
< / select> 
  

使用jQuery调用插件：

  $（'＃sizes'）。selectUl（）; 
  

这需要上面的select，并创建一个 ul 使用以下标记：

 < ul id =sizes-ulclass =plainSelect> 
< li class =guidance>选择尺寸：< / li> 
< li> XX-小< / li> 
< li class =unselected> X小< / li> 
< li class =unselected>小< / li> 
< li class =unselected>中< / li> 
< li class =unselected>大< / li> 
< li class =unselected> X-Large< / li> 
< li class =unselected> XX-大< / li> 
< / ul> 
  

使用的CSS（演示中）：

  ul.plainSelect {
 / *定位插件创建的'ul'元素* / 
 border：1px solid＃000; 
} 
 ul.plainSelect li {
 / *这样样式的'selected'li'选项'元素* / 
 background-color：＃f90; 
 display：list-item; 
} 
 ul.plainSelect li.guidance {
 / *这是从问题中的图片选择原因指导/解释* / 
 border-bottom：1px固体＃000; 
 padding：0.3em; 
 font-weight：bold; 
 font-size：1.2em; 
 background-color：#fff; 
} 
 
 ul.plainSelect li.unselected {
 / *隐藏未选择选项，并删除背景颜色对比度* / 
 background-color ：#fff; 
 display：none; 
} 
 
 ul.plainSelect：hover li，
 ul.plainSelect：hover li.unselected {
 / *确保'li'元素弹出列表被徘徊，* / 
 / *和动作/显示像'li'元素* / 
 display：list-item; 
} 
  

JS Fiddle demo 。

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> 

解决方案

Here's one way of doing it, though I'd prefer a more plug-in approach (rather than hard-coding the 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 demo.

---

Edited to include an alert demonstrating the changes in the select element's value: JS Fiddle demo.

---

Edited to include the css and html used in the demo:

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

This causes the menu to hide the unselected items until the ul is hovered over, then revealing all the options, and uses the click() event to assign the unselected 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:

(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 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).
• It could probably do with some options, possibly allowing dl elements to be used in place of the current ul, 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 API might offer some insights (though if anyone sees anything obvious please leave a comment! Or take the JS Fiddle and, 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 footer of 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!).

---

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:

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

$('#sizes').selectUl();

This takes the above select, and creates a ul with the following mark-up:

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

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

这篇关于Hover上选择框选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！