如何解决悬停时更改菜单文本
我想更改我网站上现有标题菜单的文本。有什么办法可以做到这一点,当您将鼠标悬停在菜单项上时,文本会发生变化吗?
我想确保我能够使用标题中的现有菜单,如果可能的话,还可以使用站点导航的现有类。
谢谢大家!
这是我们在 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>
您可以使用前后选择器来更改内容。如果没有,您可以使用鼠标进入和鼠标离开事件侦听器并相应地更改元素的样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。