DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> CSS3光標懸停寬度逐漸增加到指定值
CSS3光標懸停寬度逐漸增加到指定值
編輯:CSS特效代碼     

先看代碼,效果在代碼下面:
<!DOCTYPE html>
<html>
<head>
<style>
div#transitionhovertree
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div#transitionhovertree:hover
{
width:300px;
}
</style>
</head>
<body>

<div id="transitionhovertree"></div>

<p>請把鼠標指針移動到藍色的 div 元素上,就可以看到過渡效果。</p>

<p><b>何問起注釋:</b>請使用新版浏覽器查看。</p>

</body>
</html>


請移上鼠標查看效果:

請把鼠標指針移動到藍色的 div 元素上,就可以看到過渡效果。

何問起注釋:請使用新版浏覽器查看。



參考:http://hovertree.com/h/bjaf/rnqpxtsq.htm
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved