CSS Hover Another element

Question

I want to target the .drop class when I hover on the .categories class, it is possible to do this with css only?

Answer 1

div {
  width: 200px;
  height: 200px;
  float:left;
  margin: 10px;
  border: 1px solid #333;
}
.categories:hover ~ .drop {
  background-color: red;
}

<div class="categories">categories</div>
<div class="drop">drop</div>

I am afraid you can not target an element that is up to the DOM relatively to the hovered element only with CSS. You can achieve this with jQuery like so:

$('.categories').hover(function() {
    $('.drop').css({ // your code }) 
});

If the HTML was something like this check snippet:

<div class="categories"></div>
<div class="drop"></div>

you could do this:

.categories:hover ~ .drop {
    /* css rules */
}