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?

enter image description here

Nope. Also, please provide your code as text and not as an image ;) — morkro
– morkro, Commented Dec 29, 2014 at 9:22
possible duplicate of How to affect other elements when a div is hovered — invernomuto
– invernomuto, Commented Dec 29, 2014 at 9:26

kapantzak · Accepted Answer · 2014-12-29 09:31:24Z

3

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 */
}

edited Dec 29, 2014 at 9:31

answered Dec 29, 2014 at 9:23

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Hover Another element

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related