How to change css of an id element, when hovering over any link in website?

Question

Regardless of where the links are in the html, if i hover over one, for example, an image could change, the background could change, or whatever... anywhere in the site.

best answer = simple way without javascript
good enough = elegant way using javascript

edit: i already know about this...

a:hover ~ #b{
    background: red;
}

"~ #b" = next siblings

"+ #b" = first next sibling

" #b" descendant of a

that just effects siblings. what if they have completely different parents?

if there's any neat tricks, website design. that's what i'm looking for.

https://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — mplungjan, Feb 07 '18 at 17:48
As @mplungjan post, there is no way to do it just with CSS. There is a selector `element1 ~ element2` but it only works when element2 is preceded by element1 — Alejandro Maliachi Quintana, Feb 07 '18 at 17:54

score 0 · Answer 1 · answered Feb 07 '18 at 17:49

0

You can use the :hover selector to style elements when you mouse over them. You can see it here.

answered Feb 07 '18 at 17:49

Rajan Patil

952
7
15

i know how to use simple hovers. i want every link hover, to effect an id. – Puddle Feb 07 '18 at 17:55

score 0 · Answer 2 · answered Feb 07 '18 at 19:28

You'll have to use JavaScript for that. CSS cannot do this.

document.querySelector("a").addEventListener("mouseover", function(event){
    document.querySelector(".change-on-hover").classList.add("someClass");
}

document.querySelector("a").addEventListener("mouseleave", function(event){
    document.querySelector(".change-on-hover").classList.remove("someClass");
}

Change the ".change-on-hover" to a query selector for the element you want to target. "someclass" is the name of a class that will be added or removed when a link is hovered. You'll need to add your desired styles for this class in the CSS.

i don't know how to get this working. could you give me an example? — Puddle, Feb 07 '18 at 20:04

How to change css of an id element, when hovering over any link in website?

2 Answers2