z-index for select options

Question

I want to set select menu option z-index. By default it is set on top.

Step to produce bug: click on select menu and hover a tag.

在此处输入图片说明

<head>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function() {
            $('a').hover(function() {
            $('div').show()
            })
        })
    </script>


    <style>
        select option { position : relative; z-index : 5 }
    </style>
</head>

<body>
    <div style = "position:absolute; display  none; background : #F00; width : 200px; height : 200px; z-index : 100000">new</div>

    <select>
        <option>jitender</option>
        <option>chand</option>
        <option>alok</option>
        <option>srisvasta</option>
    </select>

    <a href = "#">hover</a>
</body>

Answer 1

无法将选择弹出窗口放置在另一个元素后面，但是您可以使用$('select').blur()模糊选择元素，将鼠标悬停后关闭选择。

Answer 2

Try the code below:

$(function(){
 $('a').hover(function(){
 $('select').hide();
 $('div').show()
})})

z-index for select options

Question

2 answers

solution1
2 ACCPTED 2013-05-21 11:29:23

solution2
0 2013-05-21 11:34:27

z-index for select options

Question

2 answers

solution1 2 ACCPTED 2013-05-21 11:29:23

solution2 0 2013-05-21 11:34:27

solution1
2 ACCPTED 2013-05-21 11:29:23

solution2
0 2013-05-21 11:34:27