javascript - 悬停背景根据所选主题更改

Question

我正在开发一个有两个主题的网站 Light 和 Dark。我想根据所选主题更改链接的悬停背景。用CSS改变hover背景的方法是什么？

在白色背景上，我有一个浅蓝色悬停背景可以链接。

在深色背景上，我想让悬停背景对链接透明。

我尝试使用主题更改类，但我不确定如何编写随类更改悬停的选择器。

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

悬停在链接上的 CSS。它适用于浅色主题，但如果我更改类，我不知道如何编写选择器。

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

Answer 1

使悬停 css 代码依赖于链接。所以不是

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

这样写:

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

另一种方法是只在 body 标签上切换一个类。这允许切换主题，而无需在 JS 代码的任何地方检查当前主题:

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{}

选择这种方式，SCSS 会让您的生活更轻松。