css - UL 和 LI 类的悬停效果

Question

我第一次来这里，所以请保持温柔。 (oo 才意识到我去年来过这里)!

我正在尝试用一个漂亮的淡入淡出来使一些翻转变得活跃起来。然而，网站布局不使用按钮，而是 li

您可以在此处查看演示。 https://www.fireworkscrazy.co.uk/store_v8/

我希望顶部菜单和侧面按钮上的鼠标悬停变为红色。

我一直在研究过渡元素和 a:hover:before 和 a:hover:after 但无济于事，所以我想我会来这里请教各位天才。

提前致谢。

Answer 1

目前的hover效果好像是这样设置的(basic-style.css第87行):

.nav > li > a:hover{
    background-color: #f5f5f5;
    color: #262626;
}

如果您希望它转变成红色，只需将背景颜色更改为值“红色”或您喜欢的红色阴影的十六进制代码。如果您希望它“淡出”，请尝试添加一个转换规则，例如:

.nav > li > a:hover{
    background-color: red;
    color:#fff; /*white will look better on a red background than dark gray */
    transition: 300ms;
}

在此处了解有关转换的更多信息:http://www.w3schools.com/css/css3_transitions.asp