CODEWITHSUNDEEP
csscss-transitions
Lieutenant Dan
Lieutenant Dan

Reputation: 8274

pure CSS non sass, hover over one element and expand the others

Using pure CSS. Without SASS. I'm wondering if it's possible to write something that allows a hover effect (different element to expand slightly in size) when hovered over a different element.

So basically. Hovering over one element, would expand a different div element that is neither a child or parent. Could I do this with pure CSS?

Upvotes: 1

Views: 237

Answers (1)

Paul
Paul

Reputation: 9022

CSS does not yet support any parent selector, so that's out of scope anyway. Besides children selectors (which you excluded) there are the two sibling selectors + for adjacent siblings and ~ for siblings in general.

div {
  width: 100px;
  height: 100px;
  margin: 20px;
  display: inline-block;
  background: blue;
  vertical-align: top;
  transition: 1s all;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
  color: white;
}

div#one:hover + div#two {
  width: 200px;
}

div#one:hover ~ div#three {
  background: red;
}
<div id="one">Hover me!</div>
<div id="two"></div>
<div id="three"></div>

Note: Sibling selectors only work in order of appearance in code. So, div#two ~ div#one would not affect the first div.

Upvotes: 4

Related Questions