Как изменить, прежде чем на парении

Question

У меня есть subnavigation, который выглядит следующим образом:

<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, а затем вы хотите сделать :beforecontent:"" с. так как вы установили background:none на :hover:before либо вы используете content:"•" на первый, а затем content:"»" при зависании

1.background:none на :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>

так что вы выбираете между этими 2 решениями. дайте мне знать, если это помогает

Answer 2

Как насчет:

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

Для чего-то вроде:

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

С выше, пуля точек (по умолчанию список стайлинга, очевидно) являются перерисовываются » при наведении над элементом списка.