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个孩子(偶数)