Question

我有以下内容：

<html>
    <head>
        <script type="text/javascript" 
            src="http://code.jquery.com/jquery-latest.js"></script>

        <script type="text/javascript">
            $(document).ready(function()
            {
                 $(".firstlevel").hover(
                    function()
                    {
                        $(this).find("li")
                            .css({"display": "block", 
                            "margin-left": "120px", 
                            "list-style-type": "circle"});
                    },

                    function()
                    {
                        $(this).find("li")
                            .css({"display": "none", 
                            "margin-left": "120px", 
                            "list-style-type": "circle"});
                    });
            });
        </script>

        <style>
            .firstlevel
            {
                list-style-type:disc;
                margin-left:40px;
            }

            .firstlevel li
            {
                list-style-type:square;
                margin-left:80px;
            }
        </style>


    </head>
    <body>

    <ul>
        <li class="firstlevel"><a href="#">One</a>
            <ul>
                <li><a href="#">One-One</a></li>
                <li><a href="#">One-Two</a></li>
            </ul>
        </li>
        <li class="firstlevel"><a href="#">Two</a>
            <ul>
                <li><a href="#">Two-One</a></li>
                <li><a href="#">Two-Two</a></li>
            </ul>
        </li>
    </ul>       

    </body>
</html>

我的想法是，我应该将鼠标悬停在“一个”和“两个”链接上，并使用jquery hover函数查看子链接是否显示和消失。我还想看到子链接的列表样式变为圆形，子链接变得更加缩进。

奇怪的是，当我执行鼠标悬停时，子链接的缩进会按预期更改，但子链接的项目符号会完全消失。这种情况发生在Chrome中，但不会发生在IE中。

在检查时，Chrome的用户代理样式表似乎会覆盖我的设置样式。

有谁知道为什么会发生这种情况？

Answer 1

我会尝试用类来控制显示：http://jsfiddle.net/keegan3d/WZJt2/

使用jquery悬停函数的奇怪行为

1 个答案: