悬停时的常规同级选择器

Question

I am using General sibling selectors to show a hidden div when i hover on another div the hover works fine when i tested it to change font color, but after i added the "~ .cat3" to modify the class ".cat3" styles it doesn't work, i also tried using Adjacent sibling selectors as shown in this question but it is also not working. Here is the code:

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>

The CSS:

.cat3{
display: none;
}

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

Thank You

Answer 1

This

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

won't work because the link is not a sibling of the next div

You could try this though

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