Comment personnaliser la propriété onmouseover en html?

Question

J'essaie de personnaliser les onglets. Quand un onglet est actif, je voudrais que son titre soit souligné. Je ne sais pas pourquoi, mais je ne peux pas l'atteindre avec CSS, il faut une syntaxe css à laquelle je ne peux pas penser. Donc, je pensais peut-être à customiser mon code html avec une propriété css? Est-il de toute façon attribuer le onmouseover avec visited, hover et active à mon <div> en html?

Voici HTML je

<div class="container"> 
 
    <div class="tabcordion"> 
 
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <li class="active"><a data-target=".KONTAKT">KONTAKT</a></li> 
 
     <li><a data-target=".ÜBER_UNS">ÜBER UNS</a></li> 
 
    </ul> 
 
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <div class="KONTAKT in active">My content #1.</div> 
 
     <div class="ÜBER_UNS">My content #2.</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

solution ordinaire JS:

• Donnez à chaque onglet une classe séparée, dans cet exemple .option#
• Set chacun pour souligner son titre et le contenu sur click.

document.querySelector('.option1').addEventListener('click', function() { 
 
    //remove underline from any non selected tab title 
 
    document.querySelector('.option2').classList.remove('underline'); 
 
    // underline clicked tab title 
 
    this.classList.add('underline'); 
 
}) 
 
document.querySelector('.option2').addEventListener('click', function() { 
 
    document.querySelector('.option1').classList.remove('underline'); 
 
    this.classList.add('underline'); 
 
})

.underline { 
 
    text-decoration: underline; 
 
}

<div class="container"> 
 
    <div class="tabcordion"> 
 
    <ul class="nav nav-pills nav-stacked col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <li class="option1 active underline"><a data-target=".KONTAKT">KONTAKT</a></li> 
 
     <li class="option2"><a data-target=".ÜBER_UNS">ÜBER UNS</a></li> 
 
    </ul> 
 
    <div class="tab-content col-lg-6 col-md-6 col-sm-6 col-xs-12"> 
 
     <div class="KONTAKT in active">My content #1.</div> 
 
     <div class="ÜBER_UNS">My content #2.</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Si Theres est une balise div <a> en vous essayez une balise stlye en ligne avant l'élément div. par exemple:

<style type="text/css"> 
    #your-div-id a:visited { 
    } 
</style> 
<div id="your-div-id"><a href="#">Foo</a></div> 

Sinon, vous ne pouvez gérer l'effet de vol stationnaire avec le style CSS suivant.

#your-div-id:hover { 
    color: red 
} 

L'élément div ne stocke l'histoire visité comme un élément <a>. Si vous voulez obtenir le même effet, vous devez l'implémenter avec un peu de JavaScript, qui stocke l'événement de visite dans une couche de persistance du navigateur (Cookie, API de stockage). Et après le chargement de la page, un script JS init devrait lire les informations de la couche de persistance et ajouter une classe à l'élément div.