Question

我有一个看起来像这样的子导航：

<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>

因此我在css中有这样的子弹点：

nav.mainnav ul li .subnav li:before {
 content: "";
 position: absolute;
 width: 5px;
 height: 5px;
 background: #000;
 margin-top: 13px;
 left: 6px;
 z-index: 1;
 border-radius: 6px;
}

我想在悬停时更改其内容：

nav.mainnav ul li .subnav li:hover:before {
    content: "»";
}

但它并没有改变并隐藏“子弹点”，但它只在它下方添加了双箭头。有人可以帮我解决这个问题吗？

Answer 1

您需要隐藏第一个项目符号，因此您需要在background:none上设置:hover:before并且它可以正常工作

这是因为首先您使用:before制作background，然后想要使用:before制作content:""。所以要么在background:none设置:hover:before，要么先使用content:"•"，要么在悬停时使用content:"»"

在background:none

上

1。 :hover:before

.subnav li:before {
 content: "";
 position: absolute;
 width: 5px;
 height: 5px;
 background: #000;
 left: 0px;
 z-index: 1;
 border-radius: 6px;
 top:6px;

}

.subnav li:hover:before {
    content: "»";
    background:none;
    top:0px;
}

.subnav li { 
  list-style:none;
  position:relative;
  padding-left:15px;
}

<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>

2。 content: "•"和content: "»"

.subnav li:before {
 content: "•";
 position: absolute;
 width: 5px;
 height: 5px;
 left: 0px;
 z-index: 1;
 font-size:15px;
 top:0px;

}

.subnav li:hover:before {
    content: "»";
    top:0px;
}

.subnav li { list-style:none;position:relative;padding-left:15px;}

<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>

因此您可以在这两种解决方案中进行选择。让我知道它是否有帮助

Answer 2

怎么样：

li:hover {
    list-style-type: symbols(cyclic "»");
}

类似于：

<ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Bananas</li
</ul>

如上所述，当您将鼠标悬停在列表项上方时，子弹点（显然是默认列表样式）将重新绘制为»。

如何在悬停之前更改a

2 个答案: