Timeline for How to affect other elements when one element is hovered
Current License: CC BY-SA 3.0
28 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| May 18, 2023 at 14:01 | comment | added | Naveen Kumar V | Brief and nice :) | |
| Apr 13, 2023 at 17:27 | comment | added | Tyler | How does this work if one of the elements is absolutely positioned? Does that mean it is taken out of the DOM flow and not effected by the sibling selector for example? | |
| Jan 12, 2021 at 21:47 | comment | added | user123456 | @justin if If the cube is a somewhere outside the container | |
| Jan 12, 2021 at 12:36 | comment | added | user123456 | if If the cube is a somewhere of the container: | |
| Jan 12, 2021 at 9:20 | comment | added | user123456 | here is my html stackoverflow.com/questions/65678531/… | |
| Dec 28, 2020 at 17:02 | comment | added | Justin | any idea how to do this using Tailwind CSS? | |
| Nov 5, 2020 at 22:36 | comment | added | Rod |
Note that the general sibling selector ~ only applies if the element on the left comes before the element on the right. .foo:hover ~ bar will not match if bar comes before foo in the DOM.
|
|
| Oct 5, 2020 at 21:15 | comment | added | manouna | hello, this answer didn't work for me. i have two elements in a flex container and i want one to be over the other one (zindex) but one after the other (<element1></element1> then <element2></element2>, so i used the solution with '+' and the one with '~' and none worked | |
| Nov 11, 2019 at 6:08 | comment | added | Freddy Daniel | what if parent of container ? | |
| Apr 16, 2019 at 23:11 | comment | added | Jake |
@Elliptica You would just need to use a comma; #container:hover ~ #cube, #container:hover ~ #rectangle { background-color: yellow; }
|
|
| Jan 31, 2019 at 0:46 | comment | added | Elliptica | I like this! What if we want to affect two siblings at the same time, though? E.g. not just their parent div but different things themselves? | |
| Mar 8, 2017 at 11:49 | comment | added | Mikel | Good answer !! What about if I want to change the parent when I hover the child. I think there is no selector for that. | |
| S Feb 1, 2017 at 12:47 | history | suggested | rockfeeler | CC BY-SA 3.0 |
hey, you've forgotten the siblings
|
| Feb 1, 2017 at 12:03 | review | Suggested edits | |||
| S Feb 1, 2017 at 12:47 | |||||
| Jul 13, 2016 at 8:27 | comment | added | mzonerz | How t handle on mouse leave? this is hodling the css style when u leave the mouse from the element,anyone has any idea? | |
| Mar 22, 2016 at 3:23 | comment | added | I Like |
How to apply hover effects to an element that adjoins another element eg is it possible in a table to use hover on one td to change the background-color of another td on the same row?
|
|
| Mar 3, 2015 at 17:27 | comment | added | Mike | @Hanzllah thats not possible with CSS currently, you would need to use JavaScript to alter the elements parent (#container) | |
| Mar 3, 2015 at 15:19 | comment | added | Hanzallah Afgan | What to do if the hovered element is inside the container(that we want to be effected) ??? For example: #cube:hover #container{Some CSS Effects} | |
| Oct 9, 2014 at 23:48 | history | edited | KyleMit♦ | CC BY-SA 3.0 |
added syntax highlighting
|
| Oct 2, 2014 at 4:58 | comment | added | PeterKA |
+1 Great answer @Mike. What if #container is next to #cube, i.e. #container follows #cube?
|
|
| S Jun 5, 2013 at 20:24 | history | suggested | Jorge Leitao | CC BY-SA 3.0 |
minor typo (inside if) that leads to 10s of thinking about the sentence fixed.
|
| Jun 5, 2013 at 20:14 | review | Suggested edits | |||
| S Jun 5, 2013 at 20:24 | |||||
| Oct 19, 2011 at 10:35 | comment | added | Anonymous | That's pretty cool. Is there some source where I can find more information about that ? Is it supported by all browser, is it CSS3 ? Would be great to have some more info about that. Thanks so much! | |
| Dec 22, 2010 at 4:49 | vote | accept | Trufa | ||
| Dec 21, 2010 at 18:50 | comment | added | robertc |
Don't forget the general sibling combinator ~ for 'cube is somewhere after container in the DOM and shares a parent'
|
|
| Dec 21, 2010 at 18:39 | history | edited | Mike | CC BY-SA 2.5 |
Missed off the :hover!
|
| Dec 21, 2010 at 18:37 | history | edited | Trufa | CC BY-SA 2.5 |
added 18 characters in body
|
| Dec 21, 2010 at 18:36 | history | answered | Mike | CC BY-SA 2.5 |