奇怪的CSS屬性行爲

我一直都能解決CSS問題（即使幾天後），但這次我不知道，也有朋友。奇怪的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(); 
    });*/ 

});

問題描述

正如你所看到的，我用>標誌，以針對特定的兒童。當您將鼠標懸停在菜單中的第二行上時，它可以正常工作。然後你點擊一些東西，第二行的內部菜單打開，就像它應該的那樣。但是，現在如果你徘徊在那裏，你會注意到，首先AND <li>兒童的第二行眨眼！，那不是設置那裏！如果您注意到，在第二個內部菜單中，如果您只在<ul>框中懸停，而不是在<li>框中懸停，菜單的第一行仍會受到影響。沒有什麼關於懸停<ul>或製作cursor:pointer的<ul>的。它變得更加怪異，當你注意到這個多連接不適用於所有的屬性。如果您更改它們，字體會被分隔，背景或邊框的情況也是如此。但在第一行<li>中設置cursor和hover突然影響<li>的第二行。整個問題是在CSS中，也許在HTML（可能性不大），而不是在JavaScript（絕對不是，雖然當然，我還只是一個學生）

來源

2015-08-15 maeros

歡迎來到Stack Overflow！發佈問題之前要做的主要事情之一是創建一個[MCVE]（/ help/mcve），以便您的問題可以有一個**小問題的示例，並且人們不必通過大量的代碼。另外，請不要用粗體表示一堆事情，因爲它會使文本難以閱讀，並且不要將事物標記爲不是引號的引號。對好人：非常好，你在*問題中包含了代碼*，並且有一個小提琴是一個很好的補充。 –

你有嵌套的元素：

ul > li > ul > li

因此，當您懸停最嵌套的li時，您將同時懸停其所有父項。

您更改嵌套的位置ul，但它仍保留在DOM中作爲第一級li的嵌套元素。因此，當您將鼠標光標放在第二級（或甚至是第三級li）上時，您也將鼠標懸停在第一級li上。

UPD

您可以通過JavaScript的菜單項添加懸停一些CSS類（如current）。這個類將爲懸停物品設置所有樣式。

來源

2015-08-15 13:16:10

非常感謝。我誠實地想到了這一點，但很快就駁回了這種可能性，因爲我認爲複雜的導航都是以這種方式完成的，就像在整個組中嵌套它們一樣。所以...它不會那樣工作？ – maeros

查看答案更新。 –

入住這jsfiddle

我只是添加簡單的jQuery塊碼。

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

來源

2015-08-15 13:35:38 Pavlito

奇怪的CSS屬性行爲

回答

相關問題