집 >웹 프론트엔드 >CSS 튜토리얼 >CSS는 텍스트 내용 위에 마우스를 올려 변경되는 텍스트 내용을 구현합니다.

CSS는 텍스트 내용 위에 마우스를 올려 변경되는 텍스트 내용을 구현합니다.

墨辰丷원래의: 2018-05-09 16:39:313149검색

이 글에서는 마우스를 올려 텍스트 내용을 변경하는 순수 CSS 구현을 주로 소개합니다.

코드는 다음과 같습니다.

<!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>

관련 권장 사항:

웹 페이지에 CSS 스타일 시트를 추가하는 네 가지 방법

CSS 스타일 시트 및 스타일 속성에 대한 기본 지식

CSS 스타일 시트에 대한 IE 제한 사항 및 솔루션

위 내용은 CSS는 텍스트 내용 위에 마우스를 올려 변경되는 텍스트 내용을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：div를 전체 화면에 채우는 방법(CSS)다음 기사：div를 전체 화면에 채우는 방법(CSS)