html - 悬停时的通用兄弟选择器

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

不会工作，因为链接不是下一个 div 的兄弟

不过你可以试试这个

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