我正在为我的网站使用Foundation框架,以下代码是我在HTML文件中关注的代码:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1><a href="#">jDispatch</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#"><span>Menu</span></a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
<a href="#">Menu</a>
<ul class="dropdown">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
</ul>
</li>
</ul>
</section>
</nav>
我想知道如何编辑下拉按钮本身(带有文本“菜单”)并针对所有可能的状态(不活动,悬停并单击)进行编辑?
通过检查Foundation的实际网站上的代码(该网站当然使用他们自己的框架),我能够分别使用以下CSS代码修改非活动状态和悬停状态:
/* inactive/not hovered or clicked */
.top-bar-section li:not(.has-form) a:not(.button) {
background: yellow;
color: blue;
}
/* hovered over */
.top-bar-section li:not(.has-form) a:not(.button):hover {
background: green;
color: yellow;
}
我认为
.top-bar-section li:not(.has-form) a:not(.button):active {...}
可以解决问题,但没有。编辑:另外,如何更改下拉菜单的
font-family
?使用.top-bar-section ul li > a {...}
可以使用color
更改“菜单”按钮及其所有下拉项的文本颜色,但是使用font-family
仅更改“菜单”按钮的字体。 最佳答案
.top-bar-section li:not(.has-form) a:not(.button):active {...}
单击时将更改“菜单”的样式。
但是,如果“菜单”也链接到另一个页面,则在加载新页面之前根本看不到它们时,您只会看到激活中的样式一秒钟。
Check out the codepen demo here
.top-bar-section li:not(.has-form) a:not(.button):active {
background-color: blue;
color: white;
}
关于html - 编辑处于非事件/悬停/事件状态的特定元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31461669/