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

Question

我正在开发一个主题为“光明与黑暗”的网站。我想根据所选主题更改链接的悬停背景。使用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;
}

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

Answer 2

要使用主题类名称定位链接，可以使用a.top_section_link:hover或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>