鍍金池/ 問答/HTML/ 同樣的代碼換一個標簽為何失效？

同樣的代碼換一個標簽為何失效？

div標簽的hover效果有效果 換成p標簽就失效 求解原理？？？？

<!-- 樣式 -->
<style>
     :root{
         --mainTheme:#f4f4f4;
         --mainFont: #666;
         --dropTheme:yellowgreen;
     }
     body{
         background: var(--mainTheme);
         color: var(--mainFont);

     }
    .dropdown-content { display: none;  background: var(--dropTheme)}
            
    .dropdown:hover .dropdown-content { display: block; }
    </style>
    <!-- 內(nèi)容 -->
    <body>
    <p class="dropdown">
        <span>鼠標移入事件</span>
        <div class="dropdown-content">
        <p>hello world</p>
        </div>
    </p>
    <div class="dropdown">
        <span>鼠標移動到我這！</span>
        <div class="dropdown-content">
        <p>hello world</p>
        </div>
    </div>
</body>
回答
編輯回答
陪妳哭

你的標簽嵌套有問題,p標簽是不能嵌套div標簽,瀏覽器會解析成
clipboard.png
會把p標簽解析成兩個獨立的p標簽
所以,很自然,解析成上面的解構(gòu)的時候,你的這個樣式就沒作用了

clipboard.png

2017年10月15日 00:57