悬停的一般兄弟选择器

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>