Change css var on Hover

HTML-CSS
1

Is possible to change the content of a css var when i hover it ? How i can do it ? I have a web page using react running in raspberry pi i want to change background color of the menu using this var but i don’t want to write the code again. Does anyone knows how i can update a css var value when i hover ?Thank’s

2

If I’m understanding your question correctly, you are looking for the :hover pseudo-class . It’s introduced in the challenge Adjust the Hover State of an Anchor Tag.

1 Like
3

You can just set a new value for the variable in the :hover selector (if I understood the question correctly).

:root {
  --bg-color: #03a9f4;
}

div {
  height: 200px;
  width: 200px;
  background: var(--bg-color)
}

div:hover {
  --bg-color: #9c27b0;
}

https://codepen.io/anon/pen/XLQyVO

4

Not possible but the trick is to change the CSS Class of the variable on hover by using either JavaScript or jQuery.

Check this: Learning jQuery Hover Event - .hover()

JavaScript example for it: https://codepen.io/rinatoptimus/pen/JYVgKX

1 Like
5

Thank’s to all i solved it