CSS doubt - the use of ""

Question

CSS doubt - the use of ""

Navigation

#1 by (3 votes)

0

Good morning,

I have the following doubt,

Suppose I have a structure like this:

<div id=bloque1>
  <ul>
    <li> <a href=#>opcion1</a> </li>
    <li> <a href=#>opcion2</a> </li>
  </ul>
</div>


<div id=bloque2>
<p>lorem ipsum dolor sit amet</p>
</div>

If I would like, for example, to move the mouse over the unordered list, pass X thing in an item within the list (ex: change the color of the text), I can use:

ul:hover > li a {color:red}

But how would I do to work with something that is, not within the same "ul" that I make it hover, but to work with something from the div "block2", for example to change the color to the paragraph of block2, when someone does Hover in the UL of block 1.

Thank you.

css3 css hover

asked by Facundo Díaz 08.07.2018 в 18:17

source

1 answer

Why are CSS styles not updated? Problem with a query to the database from Eloquent / PHP

score 3 · Answer 1

You can use the combiner ~ that separates two selectors and selects the second element only if it is preceded by the first and both share a common parent.

#bloque1:hover ~ #bloque2 {
	color: red
}

<div id=bloque1>
  <ul>
    <li> <a href=#>opcion1</a> </li>
    <li> <a href=#>opcion2</a> </li>
  </ul>
</div>


<div id=bloque2>
<p>lorem ipsum dolor sit amet</p>
</div>