CODEWITHSUNDEEP
javascripthtmlcssreactjs
Ravikant Singh
Ravikant Singh

Reputation: 348

Hover background change based on theme selected

I am developing a website with two themes Light and Dark. I want to change the hover background of links based on the theme selected. What is the way to change the background of hover using CSS?

on a White background, I have a light blue hover background to link. enter image description here

on a Dark background, I want to have hover background transparent to link.

enter image description here

I tried with changing class with the theme but I am not sure how to write selector for hover with the class change.

<a href='' className={theme ? ' top_section_link ' : ' top_section_link_dark '}>

CSS for hover on the link. It works fine for light theme but I don't know how to write selector if I change the class.

.lead a:hover {
  color: #2161f2;
  background: #f0f4fe;
  text-decoration: none;
  border-bottom: 2px solid #2161f2;
}

Upvotes: 0

Views: 1257

Answers (2)

Felix
Felix

Reputation: 2691

Make the hover css code dependent on the link. So instead of 

.lead a:hover { /* ... */ }

write it this way:

.lead a.top_section_link:hover { /* Light/Default Theme Hover */ }
.lead a.top_section_link_dark:hover { /* Dark Theme Hover */ }

Another way would be to only switch a class on the body tag. This allows switching the theme without checking the current theme everywhere in your JS code:

body.light-theme a:hover{}
body.dark-theme a:hover{}

/* with other elements: */
body.light-theme button{}
body.light-theme button:hover{}

body.dark-theme button{}
body.dark-theme button:hover{}

Choosing this way, SCSS would make your life easier.

Upvotes: 3

Brett DeWoody
Brett DeWoody

Reputation: 62753

To target the link using the theme class names you can use a.top_section_link:hover or a.top_section_link_dark:hover.

.lead a:hover {
  color: #2161f2;
  background: #f0f4fe;
  text-decoration: none;
  border-bottom: 2px solid #2161f2;
}

.lead a.top_section_link_dark:hover {
  background: none;
}
<div class="lead">
  <a href="" class="top_section_link">Link</a>
  <a href="" class="top_section_link_dark">Link</a>
</div>

Upvotes: 2

Related Questions