我需要有关如何开始在我的 wordpress 网站上编辑标题的帮助。我正在使用谷歌浏览器和开发人员工具。我对如何挑选 css 属性并自己编辑它们有点迷茫,希望得到一些帮助。
The URL to my site 我希望它看起来像 wordpress header
当您将鼠标悬停在它上面时,我希望它显示不透明度,当您单击它时,我希望它标记整个“正方形”。
我在菜单中使用的 CSS 是:
.navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-family: inherit;
font-size: 12px;
line-height: 15px;
}
.navbar-nav > li > a:hover {
background: rgba(255, 255, 255, 0.8);
transition: background 0.3s;
}
.navbar-nav > li.active > a {
background: rgba(255, 255, 255, 0.8);
}
最佳答案
去除a元素的外边距
.navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-family: inherit;
font-size: 12px;
line-height: 15px;
}
一旦您将鼠标悬停在导航项上,您就会添加一个半透明的背景。您还可以添加过渡以添加“淡入淡出”动画。
#wpo-mainnav.navbar ul.nav > li:hover > a {
background: rgba(255, 255, 255, 0.8);
transition: background 0.3s;
}
要标记当前类别,只需为该元素添加背景即可。
#wpo-mainnav.navbar ul.nav > li.active > a {
background: rgba(255, 255, 255, 0.8);
}
* 编辑 *
您的导航项具有 :active 样式,请尝试添加此样式:
.navbar-default .navbar-nav > li > a:active {
color: #434a54;
}
正在使用的样式表:
关于html - 如何在标题中编辑菜单 - wordpress,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28112487/