悬停时的通用兄弟选择器答案

【问题标题】：General sibling selectors on hover悬停时的通用兄弟选择器
【发布时间】：2015-08-28 16:20:58
【问题描述】：

当我将鼠标悬停在另一个 div 上时，我使用通用同级选择器来显示隐藏的 div " 样式不起作用，我也尝试使用相邻兄弟选择器，如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;
}

谢谢

【问题讨论】：

因为.cat3 不是<a> 元素的兄弟。

标签： html css css-selectors

【解决方案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>

【讨论】：