General sibling selectors on hover

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>