So ändern Sie den Mouseover-Stil ohne Verwendung von CSS-CSS-Tutorial-php.cn

So ändern Sie den Mouseover-Stil ohne Verwendung von CSS

php中世界最好的语言

Freigeben： 2017-11-29 11:37:01

Original

3021 Leute haben es durchsucht

Wir wissen, dass es im Webseitenlayout einige Sonderfälle gibt, in denen wir externe CSS-Stile nicht direkt zur Steuerung von DIV-Stilen verwenden können, z. B. das Festlegen von a:hover auf A. Wie können wir es also ändern, ohne CSS-Stile zu verwenden? über Mouseover-Stile?

Sie können onMouseOver (Maus bewegt sich über das Ziel) und onMouseOut (nachdem sich die Maus vom Ziel entfernt hat) verwenden, um ein Tag oder anderes zu implementieren HTML-TagsHover-Stil festlegen.

Sie können es direkt für Tags verwenden, unabhängig von A-Tag, SPAN-Tag, DIV-Tag usw.

text-decoration:none"

onMouseOver ="this.style.color='#F00';this.style.textDecoration='underline'"

onMouseOut="this.style.color='#00F';this.style.textDecoration=' none'">DIV

Das Obige legt den Standardstil für den aHyperlink-Code fest, den Stil, nachdem sich die Maus zum Ziel bewegt und sich vom Ziel wegbewegt Ziel. Der Feature-Code ist relativ lang.

Wichtiger Hinweis: Um dasselbe wie den Standardstil zu sehen, nachdem die Maus wegbewegt wurde, müssen Sie normalerweise style direkt auf dem Etikett verwenden, um den Standard-CSS-Stil festzulegen und ihn mit onMouseOut identisch zu halten Festlegen des CSS-Stils. Um den Unterschied zwischen dem Objektstil im Anfangszustand und dem Stil zu vermeiden, nachdem sich die Maus vom Objekt entfernt hat.

Der obige Code:

style="color:#00F; text-decoration:none"  
与
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.textDecoration=&#39;none&#39;"

Nach dem Login kopieren

Stellen Sie die Standardschriftfarbe #00F ein und zeigen Sie keine Unterstreichungen an.

Die Beispiele zum Festlegen von Hover-Stilen durch normales Hover und ohne externes Hover sind wie folgt

Vollständiger regulärer externer CSS-Fallanzeigecode:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>实例</title> 
<style> 
.abc a{ color:#00F; text-decoration:none} 
/* 默认abc盒子里超链接文字字体颜色为蓝色 没有下划线 */ 
 
.abc a:hover{ color:#F00; text-decoration:underline} 
/* 鼠标悬停abc盒子里超链接文字上后字体颜色为红色 出现下划线 */ 
 
.bb{ color:#00F} 
.bb:hover{ color:#F00; font-weight:bold} 
/* 直接对bb对象盒子设置hover */ 
</style> 
</head> 
<body> 
<div class="abc"> 
欢迎访问<a href="http://www.php.cn/">PHP</a>网站！ 
</div> 
 
<div class="bb"> 
默认我是蓝色，鼠标悬停时变红色并加粗。 
</div> 
</body> 
</html>

Nach dem Login kopieren

Screenshots von HTML Erläuterungsdiagramm zu Code und Browsereffekten

DIV-CSS-Standard- und Mouseover-Browser-Testeffekt-Screenshots

Standard- und Mouseover-Browsertesteffekt-Screenshots

HTML-Quellcode nach externem CSS Stilkonvertierung

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DIVCSS5实例</title> 
</head> 
<body> 
<div class="abc"> 
欢迎访问 
<a href="http://www.divcss5.com/"  
style="color:#00F; text-decoration:none"  
onMouseOver="this.style.color=&#39;#F00&#39;;this.style.textDecoration=&#39;underline&#39;"  
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.textDecoration=&#39;none&#39;">DIVCSS5</a>网站！ 
</div> 
 
<div style="color:#00F; font-weight:normal" 
onMouseOver="this.style.color=&#39;#F00&#39;;this.style.fontWeight=&#39;bold&#39;" 
onMouseOut="this.style.color=&#39;#00F&#39;;this.style.fontWeight=&#39;normal&#39;"> 
默认我是蓝色，鼠标悬停时变红色并加粗。 
</div> 
</body> 
</html>

Nach dem Login kopieren

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Entwicklungserfahrung mit H-Tags in Webseiten

Aufrufen von CSS-Dateimethoden unterschiedlicher Auflösung

Js-Prozess zum Betreiben von DOM-Objekten

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Mouseover-Stil ohne Verwendung von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!