hover偽類選擇定義和用法-css教學-PHP中文網

首頁

web前端

css教學

hover偽類選擇定義和用法

高洛峰

Oct 29, 2016 am 10:21 AM

偽類選擇子E:hover的定義與用法:

設定元素在其滑鼠懸停時的樣式。
E元素可以透過其他選擇器來選擇，例如使用類別選擇符、id選擇符、類型選擇符等等。
特別說明:IE6並非不支援此選擇符，但能夠支援a元素的:hover ，也就是只支援透過型別選擇符選擇的a元素的:hover 。

語法結構:

E:hover{ Rules }

瀏覽器支援:

IE瀏覽器支援此選擇符。
火狐瀏覽器支援此選擇符。
谷歌瀏覽器支援此選擇符。
opera瀏覽器支援此選擇符。

實例代碼:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.manongjc.com/article/1323.html" />  
<title>CSS教程</title>  
<style type="text/css">  
#div:hover{color:#F60;}  
.js:hover{color:green;}  
</style>  
</head>  
<body>  
<ul>  
  <li><a href="#">html专区</a></li>  
  <li><a href="#" id="div">div+css专区</a></li>  
  <li><a href="#" class="js">javascript专区</a></li>  
  <li><a href="#">Jquery专区</a></li>  
</ul>  
</body>  
</html>

使用類型選擇符設定超連結的存取前的樣式。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.manongjc.com/article/1323.html" />  
<title>CSS教程</title>  
<style type="text/css">  
#div:hover{color:#F60;}  
.js:hover{color:green;}  
</style>  
</head>  
<body>  
<ul>  
  <li><a href="#">html专区</a></li>  
  <li><a href="#" id="div">div+css专区</a></li>  
  <li><a href="#" class="js">javascript专区</a></li>  
  <li><a href="#">Jquery专区</a></li>  
</ul>  
</body>  
</html>

透過類別選擇符和id選擇符設定超連結在其滑鼠懸停時的樣式。在IE6中並不支援。

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta name="author" content="http://www.manongjc.com" />  
<title>码农教程</title>  
<style>  
div {  
  width:100px;  
  height:50px;  
  background:#ccc;  
}  
div:hover {  
  background:green;  
}  
</style>  
</head>  
<body>  
<div></div>  
</body>  
</html>

上面的程式碼可以在滑鼠懸浮於div時改變它的背景色，同時也說明，:hover偽類不僅作用域連結a元素。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn