Html 如何更改悬停前的状态
我有一个亚导航,看起来像这样:Html 如何更改悬停前的状态,html,css,Html,Css,我有一个亚导航,看起来像这样: <ul class="subnav"> <li class="odd"><a href="/angebote/fruhbucherrabatt">Frühbucherrabatt</a></li> <li class="even"><a href="/angebote/last-minutes">Last Minutes</a><
<ul class="subnav">
<li class="odd"><a href="/angebote/fruhbucherrabatt">Frühbucherrabatt</a></li>
<li class="even"><a href="/angebote/last-minutes">Last Minutes</a></li>
<li class="odd"><a href="/angebote/campingrabatt">Campingrabatt</a></li>
<li class="even"><a href="/angebote/junge-familien-rabatt">Junge Familien Rabatt</a></li>
<li class="odd"><a href="/angebote/55-Plus-Rabatt">55 Plus Rabatt</a></li>
<li class="even"><a href="/angebote/ruckkehrrabatt">Rückkehrrabatt</a></li>
<li class="odd"><a href="/angebote/ruckkehrrabatt">Limitierte Angebote</a></li>
</ul>
nav.mainnav ul li .subnav li:hover:before {
content: "»";
}
我想在hover上更改其内容,如下所示:
<ul class="subnav">
<li class="odd"><a href="/angebote/fruhbucherrabatt">Frühbucherrabatt</a></li>
<li class="even"><a href="/angebote/last-minutes">Last Minutes</a></li>
<li class="odd"><a href="/angebote/campingrabatt">Campingrabatt</a></li>
<li class="even"><a href="/angebote/junge-familien-rabatt">Junge Familien Rabatt</a></li>
<li class="odd"><a href="/angebote/55-Plus-Rabatt">55 Plus Rabatt</a></li>
<li class="even"><a href="/angebote/ruckkehrrabatt">Rückkehrrabatt</a></li>
<li class="odd"><a href="/angebote/ruckkehrrabatt">Limitierte Angebote</a></li>
</ul>
nav.mainnav ul li .subnav li:hover:before {
content: "»";
}
但它并没有改变和隐藏“要点”,只是在其下方添加了双箭头。有人能帮我解决这个问题吗?你需要隐藏第一个项目符号,所以你需要将
背景:无设置为:悬停:在之前,它就会工作
这是因为首先您要使用背景制作:before
,然后您要使用内容制作:before
:
。因此,要么在:hover:before
上设置background:none
,要么首先使用内容:“•”
,然后在悬停时使用内容:“»”
1.背景:无
在上:悬停:在
.subnav li:之前{
内容:“;
位置:绝对位置;
宽度:5px;
高度:5px;
背景:#000;
左:0px;
z指数:1;
边界半径:6px;
顶部:6px;
}
.subnav li:悬停:之前{
内容:“»”;
背景:无;
顶部:0px;
}
subnav li{
列表样式:无;
位置:相对位置;
左侧填充:15px;
}
那么:
li:hover {
list-style-type: symbols(cyclic "»");
}
例如:
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li
</ul>
- 苹果
- 橙子
- Bananas作为旁注,如果您要添加奇数/偶数样式供参考,您的类“奇数和偶数”可以替换为
:n个孩子(奇数),:n个孩子(偶数)