Question

当我将鼠标悬停在另一个div上时，我正在使用General sibling选择器来显示隐藏的div，当我测试它以改变字体颜色时悬停工作正常，但是在我添加了＆＃34;〜.cat3＆＃34;修改类＆＃34; .cat3＆＃34;它不起作用的样式，我也尝试使用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;
}

因为链接不是下一个div的兄弟而无法工作

你可以试试这个

＆＃13;

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

＆＃13;

<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>

＆＃13;

悬停时的一般兄弟选择器

1 个答案: