CSS mouseenter und mouseover

Ich habe versucht, Maus-Enter-und Mouseover-Ereignis für ein Listenelement zu behandeln. Ich möchte einfach Element unterstreichen, wenn die Maus eingibt, Element auf Mouseover/Fokus markieren und zum Original auf mouseleave Ereignis zurückkehren. Der folgende Code funktioniert gut für die Unterstreichung, aber nicht für die Hervorhebung des Teils. Es gibt zwei verschiedene Operationen, die ich behandeln möchte, unterstreiche und fokussiere entsprechend. bitte hilfe.CSS mouseenter und mouseover

underlinefunction(); 
 
focusfunction();

.nav li { 
 
    display: block; 
 
    padding-bottom: 8px; 
 
} 
 

 
.nav li a { 
 
    position: relative; 
 
    padding: 4px 2px 2px 0px; 
 
    text-decoration: none; 
 
    color: blue; 
 
    text-align: left; 
 
} 
 

 
.nav li a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0px; 
 
    height: 2px; 
 
    width: 0; 
 
    background: blue; 
 
    text-align: left; 
 
} 
 

 
.nav li a:hover:after { 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 

 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="navbar-collapse collapse"> 
 
    <ul class="nav"> 
 
     <li id="btnabout"><a href="#parallax"><strong>About</strong></a></li> 
 
     <li id="btnportfolio"><a href="#portfolio"><strong>PortfolioPortfolio</strong></a></li> 
 
     <li id="btncontact"><a href="#contact"><strong>Contact</strong></a></li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 

 
</html>

Quelle

2017-05-05 sand

Was haben Sie versucht? Suchen Sie nur nach CSS-Funktionalität? Konzentrieren Sie sich auf einen Link, damit er angeklickt wird. Wünschen Sie das? Diese Frage ist voller Löcher –

Sie können meine Antwort oder JSFiddle Link überprüfen. – LKG

Sie müssen den folgenden Code in CSS hinzufügen zu markieren.

.nav li a:hover { 
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
    -webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
} 
.nav li a:focus { 
     text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
     -webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
}

Sie können Farbe a:hover oder a:focus text-shadow ändern, wie Sie wollen.

.nav li{ 
 
    display:block; 
 
    padding-bottom:8px; 
 
} 
 
.nav li a{ 
 
    position:relative; 
 
    padding: 4px 2px 2px 0px; 
 
    text-decoration: none; 
 
    color: blue; 
 
    text-align: left; 
 
} 
 
.nav li a:hover { 
 
    text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
 
    -webkit-text-shadow: 0 1px 2px rgba(0,0,0,0.8); 
 
} 
 
.nav li a:after{ 
 
    content: ""; 
 
    position:absolute; 
 
    bottom: 0; 
 
    left:0px; 
 
    height: 2px; 
 
    width:0; 
 
    background: blue; 
 
    text-align: left; 
 
} 
 
.nav li a:hover:after{ 
 
    width: 100%; 
 
}

<div class="navbar-collapse collapse"> 
 
     <ul class="nav"> 
 
     <li id="btnabout"><a href="#parallax"><strong>About</strong></a></li> 
 
     <li id="btnportfolio"><a href="#portfolio"><strong>PortfolioPortfolio</strong></a></li> 
 
     <li id="btncontact"><a href="#contact"><strong>Contact</strong></a></li> 
 
     </ul> 
 
</div>

jsfiddle code here

Quelle

2017-05-05 06:21:13 LKG

Hallo Lokesh, ich möchte unterstreichen, wenn die Maus eingeben, Unterstreichen entfernen und markieren, wenn Sie den Mauszeiger (oder Fokus), zurück zum Original, wenn die Maus verlassen. Was Sie vorgeschlagen haben funktioniert nicht nach den Ausnahmen und Unterstreichung und Hervorhebung werden zusammen bei der Mauseingabe wirksam. – sand

CSS mouseenter und mouseover

Antwort

Verwandte Themen