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

Question

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

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

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

我尝试使用主题更改班级，但我不确定如何编写选择器以在班级更改时悬停。

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

标签： javascripthtmlcssreactjs

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将使您的生活更轻松。