Beginnerprogrammer Beginnerprogrammer - 3 months ago 10
HTML Question

How to change a before on hover

I have an subnavigation which looks like this:

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


Thereby I have my own bullet points like this in 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;
}


I want to change its content on hover like this:

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


But it is not changing and hiding the "bullet point" but it only adds the double arrow below it. Could someone help me out on this?

Answer

you need to hide the first bullet, so you need to set background:none on :hover:before and it works

this is because at first you make the :before with background and then you want to make the :before with content:"" . so either you set background:none on :hover:before either you use content:"•" at first and then content:"»" at hover

1. background:none on :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: "•" and 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>

so you choose between these 2 solutions. let me know if it helps

Comments