懸停效果不工作

Question

***編輯：

「問題尋求幫助調試（」爲什麼不是這個代碼工作「？）必須包括所期望的行爲，一個特定的問題或錯誤，並在最短的代碼有必要在問題本身中重現它，沒有明確問題陳述的問題對其他讀者沒有用，請參閱：如何創建最小，完整和可驗證示例。 - Marc B，MártonMolnár，LinkinTED，Anonymous，Joshua Moore「

代碼被提供;問題被指定了;這是一個明確的問題......我怎麼需要描述它比我做得更多，如果我不明白有什麼問題

*** END

請幫

兩個例子：！

1） CSS：

 .link-with-popup { 
     position: relative; 
     z-index: 100; 
     margin-bottom: 10px; 
     font: normal 11px tahoma; 
    } 

    .link-with-popup:hover { 
     z-index: 200; 
    } 

    .link { 
     background: #E0EAF1; 
     padding: 10px 0; 
     width: 100px; 
     text-align: center; 
     cursor: pointer; 
    } 

    .link:hover { 
     background: #c4dae9; 
    } 
    .aa { 
     color:#FF00FF; 
    } 
    /* The problem */ 
    .link:hover + .popup { 
     display: block; 
    } 
    /* /The problem */ 
    .popup { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 400px; 
     bottom: 0; 
     display: none; 
    } 

    .popup:hover { 
     display: block; 
    } 

    .popup .box { 
     position: absolute; 
     top: 0; 
     left: 130px; 
     right: 0; 
     bottom: 0; 
     background: #505050; 
     color: #fff; 
     padding: 10px 20px; 
    } 

jsfiddle

2） CSS：

.link-with-popup { 
     position: relative; 
     z-index: 100; 
     margin-bottom: 10px; 
     font: normal 11px tahoma; 
    } 

    .link-with-popup:hover { 
     z-index: 200; 
    } 

    .link { 
     background: #E0EAF1; 
     padding: 10px 0; 
     width: 100px; 
     text-align: center; 
     cursor: pointer; 
    } 

    .link:hover { 
     background: #c4dae9; 
    } 
    .aa { 
     color:#FF00FF; 
    } 
    /* The problem */ 
    .aa:hover + .popup { 
     display: block; 
    } 
    /* /The problem */ 
    .popup { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 400px; 
     bottom: 0; 
     display: none; 
    } 

    .popup:hover { 
     display: block; 
    } 

    .popup .box { 
     position: absolute; 
     top: 0; 
     left: 130px; 
     right: 0; 
     bottom: 0; 
     background: #505050; 
     color: #fff; 
     padding: 10px 20px; 
    } 

jsfiddle-2

在第一位的，懸停效果工作正常，但在第二個它不是。我不明白爲什麼。它應該在的鏈接效應以及...

請幫

Answer 1

在你的目標.aa，而不是.link你的第二個例子。 .aa是.link的孩子，.popup是.link的下一個兄弟。 +選擇器選擇下一個兄弟。 .popup不是.aa下一個兄弟，這就是爲什麼你應該使用.link:hover+.popup爲您的選擇：

.link:hover + .popup { 
     display: block; 
    }