悬停时更改菜单文本

问题描述

我想更改我网站上现有标题菜单的文本。有什么办法可以做到这一点，当您将鼠标悬停在菜单项上时，文本会发生变化吗？

我想确保我能够使用标题中的现有菜单，如果可能的话，还可以使用站点导航的现有类。

谢谢大家！

这是我们在 theme.css 中用于站点导航的现有代码：

/*================ #Site Nav and Dropdowns ================*/
.site-nav--centered {
 padding-bottom: 22px;
}

/*================ Site Nav Links ================*/
.site-nav__link.site-nav--active-dropdown {
 border: none; 
 border-bottom: none;
 z-index: 2;
      }

.site-nav__link:focus .site-nav__label,.site- 
      nav__link:not([disabled]):hover .site-nav__label {
  border-bottom-color: none !important;
  color: #eae5d3}

@media only screen and (max-width: 989px) {
 .site-nav__link--button {
   font-size: calc(var(--font-size-base) * 1px); } }

.site-nav__link--button:focus,.site-nav__link--button:hover {
 color: var(--color-text-focus);
 }

解决方法

您可以使用伪选择器 :hover 在悬停时应用样式。将此与过渡相结合，您可以制作一些漂亮的现代作品。例子：

<style>
button {
   background-color: red;
}
button:hover {
   background-color: blue;
}
</style>
<button> Hover on me! </button>

您可以使用前后选择器来更改内容。如果没有，您可以使用鼠标进入和鼠标离开事件侦听器并相应地更改元素的样式。

menu mousehover