Heim >Web-Frontend >CSS-Tutorial >CSS implementiert das Ändern von Textinhalten, indem die Maus darauf platziert wird
CSS implementiert das Ändern von Textinhalten, indem die Maus darauf platziert wird
- 墨辰丷Original
- 2018-05-09 16:39:313147Durchsuche
In diesem Artikel wird hauptsächlich die Implementierung von reinem CSS vorgestellt, um den Textinhalt zu ändern, indem Freunde in Not darauf verweisen.
Der Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过变换文字</title>
<style>
#Menu {
width:500px;
margin:50px auto;
border:1px solid #CCC;
overflow:hidden;
}
#Menu ul {
margin:0;
padding:0;
list-style:none;
}
#Menu li {
width:100px;
height:22px;
line-height:22px;
float:left;
overflow:hidden;
text-align:center;
}
#Menu a {
width:100px;
float:left;
overflow:hidden;
}
#Menu span {
display:block;
margin-top:-22px;
}
#Menu a:hover {
padding-top:22px;
}
</style>
</head>
<body>
<ul id="Menu">
<li><a href="#"><span>HOME</span>首页</a></li>
<li><a href="#"><span>NEWS</span>新闻</a></li>
<li><a href="#"><span>ABOUT</span>关于</a></li>
<li><a href="#"><span>CONTACT</span>联系</a></li>
<li><a href="#"><span>照片</span>PHOTO</a></li>
</ul>
</body>
</html>Verwandte Empfehlungen:
Vier Möglichkeiten, CSS-Stylesheets hinzuzufügen zu Webseiten
IE-Einschränkungen und Lösungen für CSS-Stylesheets
Das obige ist der detaillierte Inhalt vonCSS implementiert das Ändern von Textinhalten, indem die Maus darauf platziert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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：Wie man ein Div dazu bringt, den gesamten Bildschirm auszufüllen (CSS)Nächster Artikel：Wie man ein Div dazu bringt, den gesamten Bildschirm auszufüllen (CSS)