CODEWITHSUNDEEP
htmlcsshovercss-selectors
Kenneth
Kenneth

Reputation: 13

Css nth-child:hover ~ first-child {...}

Im trying to change the first child, when i hover on the second child. How do you do this with html and css only?

(With the tilde/~ i seem to be able to select childeren downwards in the html code, but not upwards. Do i have to use a different selector to go upwards?)

grtz

<div id="container">
        <div id="box1"></div>
        <div id="box2"></div>
</div>

<style>
   #box1 {
      height: 100px;
      width: 100px;
      background-color: red;
   }

   #box2 {
      height: 100px;
      width: 100px;
      background-color: lime;
   }

   #box2:hover ~ #box1 {
      height: 300px;
      width: 300px;
      background-color: yellow;
   }

</style>

Upvotes: 0

Views: 3333

Answers (2)

try-catch-finally
try-catch-finally

Reputation: 7624

General sibling selectors, this is what the tilde expresses, will only select the siblings following (not preceeding) the matched element.

The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

Reference: http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

In your case there might be a CSS-only chance to archive this. Actually two ...

Chance 1

On parents :hover, change the children.

#container:hover div:first-child {
  background-color: #cff;
}

In your case, this required #container to be display: inline-block;, otherwise the red box would change too, when hovering the empty area right to both boxes.

Bin: http://jsbin.com/dilitucije/1

Works in all modern browsers and most older browsers too.

Chance 2

I'd use flexbox with defined order to reverse the rendering of both items. Since the rendering order of elements is reversed but the DOM order is not, this works.

CSS:

.reversed {
  display: flex;
  flex-direction: column-reverse; /* reverse rendering */
}

#container div:hover:first-child ~ div {
  background-color: #cff;
}

Explanation of the Flexbox rules:

  • use Flexbox (great explanation, W3C spec)
  • order the items in rows (the container is a "column"), reverse the order of the items within the .reversed container (first DOM node is rendered last, last DOM node is rendered first)

Add the class to your #container

<div id="container" class="reversed">...</div>

Bin: http://jsbin.com/piyokulehe/1

Works in FF 34, Chrome 39, should work in at least IE 11 too (probably not IE10).

Update:

  • Fixed wrong row-reverse (the example uses column-reverse, matches your requirement)
  • Removed unnecessary justify-content (since the items are rendered into rows, this is not necessary)
  • Added explanaition to the Flexbox solution

Upvotes: 2

A.B
A.B

Reputation: 20445

To achieved this on hover your element need to be the child of the element or comes after the element that is hovered.

The element whose styles are needed to be changed must be the descendent of the hovered element or comes next to it to work

Upvotes: 0

Related Questions