奇怪的 CSS 属性行为

Question

我一直都能在css（甚至几天后）解决问题，但这次，我不知道，朋友们也是。

简单地说，:hover 属性和 cursor 属性瞄准了不应该瞄准的东西。

下面，我放了 FIDDLE 代码和 HTML+CSS+JS，下面是完整的问题描述。

HTML

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Experiment - jQuery</title>
<link rel="icon" href="" type="image/gif">
<meta name="author" content="Michal Šeps">
<meta name="description=" content=""> 
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]><script src="bower_components/html5shiv/dist/html5shiv.js"></script><![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="java.js"></script>
<link rel="stylesheet" type="text/css" href="_css/main.css">
<link href='http://fonts.googleapis.com/css?family=Comfortaa:400,700,300' rel='stylesheet' type='text/css'>
<script type="text/javascript">
<!--Google Analytics-->
</script>
</head>

<body>

<nav id="nav_left">
    <ul>
        <li>Expermient JQ 01
            <ul class="nav_left_ul02">
                <li>The Test 01</li>
                <li>The Test 01</li>
                <li>The Test 01</li>
                <li>The Test 01</li>
                <li>The Test 01</li>
            </ul>
        </li>
        <li>Expermient JQ 02
            <ul class="nav_left_ul02">
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
                <li>The Test 02</li>
            </ul>
        </li>
        <li>Expermient JQ 03
            <ul class="nav_left_ul02">
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
                <li>The Test 03</li>
            </ul>
        </li>
        <li>Expermient JQ 04
            <ul class="nav_left_ul02">
                <li>The Test 04</li>
                <li>The Test 04</li>
                <li>The Test 04</li>
                <li>The Test 04</li>
                <li>The Test 04</li>
            </ul>
        </li>
        <li>Expermient JQ 05
            <ul class="nav_left_ul02">
                <li>The Test 05</li>
                <li>The Test 05</li>
                <li>The Test 05</li>
            </ul>
        </li>
        <li>Expermient JQ 06
            <ul class="nav_left_ul02">
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
                <li>The Test 06</li>
            </ul>
        </li>
        <li>Expermient JQ 07
            <ul class="nav_left_ul02">
                <li>The Test 07</li>
                <li>The Test 07</li>
                <li>The Test 07</li>
                <li>The Test 07</li>
                <li>The Test 07</li>
            </ul>
        </li>
        <li>Expermient JQ 08
            <ul class="nav_left_ul02">
                <li>The Test 08</li>
                <li>The Test 08</li>
                <li>The Test 08</li>
                <li>The Test 08</li>
            </ul>
        </li>
    </ul>
</nav>



</body>
</html>

CSS

@charset "UTF-8";
/*UPPER LEVELS*/




/* CSS Document */
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/*V prďż˝pade ďż˝e nenďż˝ podporovďż˝n browserem, muďż˝e tohle pomoct*/
nav, aside, main, details, header, hgroup, menu, article, section, footer, figure, figcaption, small {
        display: block;
    }


/*LINKS, HEADER, NAVIGATION LEFT, MAIN, FOOTER, LINKS*/

body {
    background-color: rgba(129,70,0,1.00);
    background-repeat: no-repeat;
    background-size: 100%;
    font-family: 'Comfortaa', cursive;
    }



/*---------------------------------------LINKS------------------------------------------*/

a {
    text-decoration:none;
    color:rgba(255,255,255,1.00);
    }




/*------------------------------------NAVIGATION LEFT---------------------------------------*/
#nav_left {
    width: 170px;
    height: auto;
    float: left;
    }

    #nav_left > ul {
    width: auto;
    height: auto;
    }

    #nav_left > ul > li {
    width: auto;
    height: auto;
    font-weight:500;
    font-size: 15px;
    color: rgba(255,255,255,1.00);
    border: solid 2px rgba(255,255,255,1.00);   
    margin: 0 0 10px 0;
    float:left;
    padding: 5px;
    cursor: pointer;
    }

    #nav_left > ul > li:hover {
    background-color:rgba(255,255,255,0.5);
    }



/*------navigation left second ul set------*/   
.nav_left_ul02 {
    position: absolute;
    left: 170px;
    top: 0;
    width: 150px;
    height: auto;
    display: none;
    background-color:rgba(255,255,255,0.30);
    }

    .nav_left_ul02 > li {
    width: auto;
    height: auto;
    font-weight:100;
    font-size: 15px;
    color: rgba(255,255,255,1.00);
    border: solid 2px rgba(255,255,255,1.00);   
    margin: 0 0 10px 0;
    padding: 5px;
    cursor: pointer;
    }   

    .nav_left_ul02 > li:hover {
    background-color:rgba(255,255,255,0.5);
    }   

    .nav_left_ul02 > li > a {
    display: block;
    width: auto;
    height: auto;
    }

JavaScript

$(document).ready(function() {




$("#nav_left > ul > li").click(function(){
    if ( $(".nav_left_ul02").is(":visible") ) {
        $(".nav_left_ul02").hide();
        $(this).children(".nav_left_ul02").show();
        console.log("1 fired");
    } else {
        $(this).children(".nav_left_ul02").show();
        console.log("2 fired");
    }
 });



/*$("#nav_left > ul > li").click(function(){
        $("#nav_left > ul > li > ul").hide();
        $(this).children(".nav_left_ul02").show();
   });*/


/*$("#nav_left > ul > li").click(function(){
        $(".nav_left_ul02").toggle();
   });*/


/*
$("#nav_left > ul > li").click(function(){
    if ( $(this).children(".nav_left_ul02").is(":visible") ) {
        $(this).children(".nav_left_ul02").hide();
    } else {
        $(this).children(".nav_left_ul02").hide();
        $(this).children(".nav_left_ul02").toggle();
    }
});
*/


/*$("#nav_left > ul > li").click(function(){
        $(this).children(".nav_left_ul02").toggle();
   });*/

});

PROBLEM DESCRIPTION

如您所见，我使用 > 标志来针对特定的儿童。当您将鼠标悬停在菜单的第二行时，它会正常工作。然后你点击一些东西，内部菜单的第二行就会打开，就像它应该的那样。但是，现在如果您将鼠标悬停在那里，您会注意到第一行和第二行 <li> children blinks!, 未设置那里！。如果您注意到，在第二个内部菜单中，如果您将鼠标悬停仅在 <ul> 框上方而不是在 <li> 框上方，菜单的第一行仍然受到影响。完全没有关于悬停 <ul> 或为 <ul> 制作 cursor:pointer 的内容。它变得更奇怪，当您注意到此多重连接不适用于所有属性时。如果您更改字体，字体会分开，背景或边框也是如此。但是在 <li> 的第一行中设置 cursor 和 hover 突然也会影响 <li> 的第二行。整个问题在css，可能在html（不太可能），但不在JavaScript（肯定不是，当然，我还是个学生）

Answer 1

您有嵌套元素：

ul > li > ul > li

因此，当您悬停最嵌套的 li 时，您同时悬停了它的所有父级。

您更改了嵌套 ul 的位置，但它仍作为第一层 li 的嵌套元素保留在 DOM 中。因此，当您将鼠标光标放在第二层（甚至第三层 li）上时，您也悬停在第一层 li。

UPD

您可以通过 JavaScript 将一些 CSS class（如 current）添加到悬停时的菜单项。 class 将设置悬停项的所有样式。

Answer 2

勾选这个jsfiddle

我只是添加了简单的jquery块代码。

$(".nav_left_ul02 li").on("mouseover", function (){
    $(this).parent().parent().css("background", "none");
});

奇怪的 CSS 属性 行为

Strange CSS property behaviour

html

css

jquery

cursor

hover

奇怪的 CSS 属性行为