Menu icon Foundation
Hover state remains active onback button

Hi,

I have done quite a bit of research but I could not find any CSS solutions for this problem.

I have buttons on my site and once I click them and go to a target page, that button still remains in the hover state after I return to that page by clicking back button. I have matched the style rules for hover and focus states but then the hover effect won´t be available unless I click somewhere else on the screen first. Anyone has a solution for this?

Many thanks....

hoveractivefocuscssbutton

Hi,

I have done quite a bit of research but I could not find any CSS solutions for this problem.

I have buttons on my site and once I click them and go to a target page, that button still remains in the hover state after I return to that page by clicking back button. I have matched the style rules for hover and focus states but then the hover effect won´t be available unless I click somewhere else on the screen first. Anyone has a solution for this?

Many thanks....

Shoaib Iqbal almost 5 years ago

Hi, can you post the code or should us the link to that page.

Rafi Benkual almost 5 years ago

Can't replicate this on the docs. We'll need to see you code like Shoaib mentioned.

Sader Neoklis almost 5 years ago

Hello,

You can find my code below. I have modified the standard side nav
attributes for my site.

<ul class="side-nav"> 
        <li><a href="isi-yalitimi-nedir.php">ISI YALITIMI NEDİR?</a></li> 
        <li><a href="Nasil-calisir.php">NASIL ÇALIŞIR</a></li> 
        <li><a href="Farki.php">FARKI</a></li> 
        <li><a href="NASA-teknolojisi.php">ORJİNAL NASA TEKNOLOJİSİ</a></li>
        <li><a href="mantolama-nedir.php">MANTOLAMA NEDİR?</a></li> 
        <li><a href="enerji-kimlik-belgesi.php">ENERJİ KİMLİK BELGESİ</a></li>
        <li><a href="sikca-sorulan-sorular.php">SIKÇA SORULAN SORULAR</a></li> 
        <li><a href="Referanslar.php">REFERANSLARIMIZ</a></li> 
</ul>

  .side-nav {
    display: block;
    margin: 0;
    padding: 0 0;
    list-style-type: none;
    list-style-position: outside;
    font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif; }
  .side-nav li {
    margin: 0 0 0 0;
    font-size: 1rem;
    font-weight: normal; }
  .side-nav li a:not(.button) {
    display: block;
    color: #666666;
    background-color: #EEEEEE;
    margin: 0;
    padding: 0.4800rem 0.500rem;
    border-bottom: 1px solid #999999; 
    /*text-align: right;*/} /*REVISED*/
  .side-nav li:first-child:not(.button) {
    border-top: 1px solid #999999;} /*ADDED TOP BORDER FOR THE FIRST LI ELEMENT*/
  .side-nav li a:not(.button):hover {
    background-color: #DAEEF3;    
    color: #666666; }
  .side-nav li a:not(.button):focus, .side-nav li a:not(.button):active {
    color: #666666;
    background-color: #EEEEEE;  
    }
  .side-nav li.active > a:first-child:not(.button) {
    color: #FFFFFF;
    background: rgb(37, 50, 66);
    background: -moz-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -webkit-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -o-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: -ms-linear-gradient(270deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    background: linear-gradient(0deg, rgb(37, 50, 66) 14%, rgb(97, 133, 174) 100%);
    font-weight: normal;
    font-family: 'Open Sans', Helvetica, Roboto, Arial, sans-serif; }
  .side-nav li.divider {
    border-top: 1px solid;
    height: 0;
    padding: 0;
    list-style: none;
    border-top-color: white; }
  .side-nav li.heading {
    color: #008CBA;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase; }

Shoaib Iqbal almost 5 years ago

Hi Sader, I tried with this code but could not replicate the issue, does this happen on all browsers? on latest Firefox it shows a dotted outline on going back, which can be removed by this code.

.side-nav li a:not(.button) {
    outline:none;
}