suchen

Heim  >  Artikel  >  Web-Frontend  >  Der Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt

Der Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt

零到壹度
零到壹度Original
2018-04-04 11:09:562001Durchsuche

In diesem Artikel wird hauptsächlich der Code zum Implementieren des CSS-Erweiterungseffekts vorgestellt, wenn die Maus auf beiden Seiten über die Elementunterstreichung fährt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und ihn als angeben eine Referenz. Folgen wir dem Editor, um einen Blick darauf zu werfen 

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#underline{  
  width: 200px;   
   height: 50px;    
   background: #ddd;    
   margin: 20px;    
   position: relative;
 }
  
  #underline:after{  
    content: "";    
    width: 0;   
    height: 1px;    
    background: blue;    
    position: absolute;    
    top: 100%;    
    left: 50%;    
    transition: all .8s;
 }
    
    #underline:hover:after{ 
      left: 0%;   
      width: 100%;
 }
 </style>
 
 </head>
 
 <body>   
      <p id="underline"></p>
      
 </body>
 
 </html>

Verwandte Empfehlungen:

Pseudoelemente und CSS3 verwenden, um Wenn die Maus in die Unterstreichung bewegt wird, wird sie nach beiden Seiten erweitert. Horizontale Navigationsleiste + Navigationsleiste folgen + Navigationsleiste unterstreicht den Gleiteffekt

Das obige ist der detaillierte Inhalt vonDer Code implementiert den CSS-Erweiterungseffekt, wenn die Maus über beide Seiten der Unterstreichung des Elements fährt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css css3 伪元素
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der CSS-Nutzungsfähigkeiten in WeChat-MiniprogrammenNächster Artikel：Zusammenfassung der CSS-Nutzungsfähigkeiten in WeChat-Miniprogrammen

In Verbindung stehende Artikel

Mehr sehen