（.bmenu：hover li a）VS（.bmenu li a：hover） - 區別？

我想問任何能幫助我的人，這兩個CSS標籤的區別在哪裏。（.bmenu：hover li a）VS（.bmenu li a：hover） - 區別？

.bmenu:hover li a{...}

.bmenu li a:hover{...}

非常感謝您的幫助和SRY我的英語不好。

編輯1：我主要想問一下解釋，他們是如何工作的，因爲在第一種情況下，在hover後面有一個「li a」。這是什麼意思？如果你使用.bmenu:hover你說你想要的CSS，當你徘徊在整.bmenu格申請

<div class="bmenu"> 
<ul> 
<li><a href="#">one</a></li> 
<li><a href="#">two</a></li> 
</ul> 
</div>

：THX

來源

2015-08-21 Filip CZ

爲了解釋這一點，我將使用這個示例代碼。

當你說.bmenu li a:hover你是說你想，當你將鼠標懸停內.bmenuli的a標籤應用CSS。

下面是一個簡單的例子，我做，頂部採用.bmenu:hover方法，底部使用li a:hover方法。 fiddle here。

來源

2015-08-21 17:14:08

好的，謝謝，但爲什麼是「李一」後：懸停標籤（在我的第一個例子）？這對功能意味着什麼？ Thx –

在第一個'.bmenu：hover li a'中，你基本上是說*「當我把'.bmenu'懸停時，我希望我的'a'在'li'中的樣式來做到這一點。」*所以在我的例子中我在說，*當我將'.bmenu'懸停時，我希望我的'''''在'li'標籤內將顏色更改爲白色，背景更改爲黃色。*與第二種說法相反，我希望更改爲只有當我懸停'a'時纔會發生。 –

好吧，最後是THX，我想我終於明白了。 –

在第一種情況下，<a>將在第二種情況下懸停.bmenu時應用樣式 - 當您懸停<a>本身時。在這兩個區塊看看：

.bmenu1, .bmenu2 { 
 
    width: 200px; 
 
    height: 100px; 
 
    margin: 10px; 
 
    padding: 40px; 
 
    background-color: orange; 
 
} 
 
a { 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    background-color: firebrick; 
 
} 
 
.bmenu1:hover a { 
 
    background-color: lightblue; 
 
} 
 
.bmenu2 a:hover { 
 
    background-color: lightblue; 
 
}

<div class="bmenu1"> 
 
    <a href="#"></a> 
 
</div> 
 
<div class="bmenu2"> 
 
    <a href="#"></a> 
 
</div>

來源

2015-08-21 17:21:43 Cheslab

（.bmenu：hover li a）VS（.bmenu li a：hover） - 區別？

回答

相關問題