懸停的一般兄弟選擇器

Question

我使用通用的兄弟選擇器來顯示隱藏的div當我懸停在另一個div上懸停工作正常，當我測試它改變字體顏色，但在我添加「〜.cat3」來修改類「.cat3」樣式它不起作用，我也嘗試使用this question中顯示的鄰接兄弟選擇器，但它也不起作用。下面是代碼：

HTML：

<div class="row subcat" > 
    <div class="col-md-6 subcatitem"> 
     <a href="link.html">category name</a> 
    </div> 
    <div class="col-md-6 cat3"> 
    Category Items 
    </div> 

的CSS：

.cat3{ 
display: none; 
} 

.subcatitem a:hover ~ .cat3{  
display: block; 
} 

謝謝

Answer 1

這

.subcatitem a:hover ~ .cat3{  
display: block; 
} 

不會起作用，因爲該鏈接是n加時賽下一格

的兄弟你可以試試這個雖然

.cat3 { 
 
    display: none; 
 
} 
 

 
/* doesn't work 
 
.subcatitem a:hover ~ .cat3{  
 
display: block; 
 
} 
 
*/ 
 

 
.subcatitem:hover ~ .cat3 { 
 
    display: block; 
 
}

<div class="row subcat"> 
 
    <div class="col-md-6 subcatitem"> 
 
    <a href="link.html">category name</a> 
 
    </div> 
 
    <div class="col-md-6 cat3"> 
 
    Category Items 
 
    </div>