Question

当我从select标签中单击某个选项时，其他div将获得悬停状态。这只发生在Windows 8,7和XP的谷歌浏览器下。在Chrome for Mac中它运行良好。在Windows中的Firefox，Safari和IE中......即使在IE8中也是如此！

<div class="wrapper">
<div class="menu">
    <ul>
        <li><a class="hide" href="">Menu 1</a>
        </li>
        <li><a class="hide">Menu 2</a>
            <ul>
                <li><a class="hide">Sub menu  1</a>
                    <ul>
                        <li><a href="">Sub item 1</a></li>
                        <li><a href="">Sub item 3</a></li>
                        <li><a href="">Sub item 3</a></li>
                    </ul>
                </li>
                <li><a class="hide">Sub menu 2</a>
                    <ul>
                        <li><a href="">Sub item 1</a></li>
                        <li><a href="">Sub item 2</a></li>
                        <li><a href="">Sub item 3</a></li>
                        <li><a href="">Sub item 4</a></li>
                        <li><a href="">Sub item 5</a></li>
                    </ul>

                </li>
                <li><a class="hide">Sub menu 3</a>
                    <ul>
                        <li><a href="">Sub item 1</a></li>
                        <li><a href="">Sub item 2</a></li>
                    </ul>
                </li>
                <li><a href="">Sub menu 4</a></li>
                <li><a href="">Sub menu 5</a></li>
                <li><a href="">Sub menu 6</a></li>
            </ul>
        </li>
    </ul>
</div>
<table width="100%">
    <tbody>
        <tr>
            <td>
                <select class="ComboLetra11" style="width:80px;">
                  <option selected="selected" value="__">Select 01</option>
                  <option value="01">ASD 01</option>
                  <option value="02">ASD 02</option>
                  <option value="03">ASD 03</option>
                  <option value="04">ASD 04</option>
                  <option value="05">ASD 05</option>
                </select>
            </td>
            <td>
                <select class="ComboLetra11" style="width:120px;">
                    <option selected="selected" value="__">Select 02</option>
                    <option value="M3">Option 1</option>
                    <option value="AR">Option 2</option>
                    <option value="AA">Option 3</option>
                    <option value="AU">Option 4</option>
                    <option value="AV">Option 5</option>
                    <option value="G3">Option 6</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
</div>

我做了一个例子，你可以看到，如果你点击“select 02”标签的第2和第3个选项，“菜单2”的：悬停状态就会被激活。

http://codepen.io/jorgegirao/pen/tckwl?editors=110

Answer 1

好的，我能够为此创建一个解决方法。在菜单的父元素上，输入以下内容：

onmouseover="document.getElementById('ID OF UL').style.zIndex = '1';" onmouseout="document.getElementById('ID OF UL').style.zIndex = '-1';"

然后在那个之后的下一个元素上，反过来： onmouseover="document.getElementById('ID OF UL').style.zIndex = '-1';" onmouseout="document.getElementById('ID OF UL').style.zIndex = '1';"

显然，根据您使用的页面结构，您可能需要稍微更改一下。但是，当你不使用时，菜单的z-index应该是-1。不要忘记你需要一个相对或绝对的职位;

不漂亮，但我花了20个小时试图解决这个问题，我几乎找不到任何人抱怨它，更不用说更清洁的解决方案了。

谷歌浏览器<select> bug？</select>

1 个答案: