多种css实现鼠标经过hover效果

时间：2015-04-07 11:20:03 　来源：免费模板网　作者：风雪　阅读次数　tagscss特效

本案例是对js的加强学习在js里面是onmouseover事件，在css里面是hover事件CSS3实现多种Action:hovert效果，请使用火狐或Chrome浏览器，IE用户请使用IE9浏览，低版本IE将无效，看不到任何效果，或许会对你的前端编程有帮助。

<!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>CSS3实现多种Action:hovert效果</title>
<style>
body {background-color:#333;}
.main{ background-color:#fff;}
.g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880{ background:transparent;  } 
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* Remove annoying border on linked images. */
a img { border: none; }
/*
	Golden Grid - CSS Library
	Author:Vladimir Carrer
*/
/* CSS Grid */
.main {  margin:0 auto;  width:970px; padding-top:10px;   }
.g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880,.g960 {float:left; display: inline; margin-left:10px;  } 
/* 6 columns */
.g160 {width:150px; }
.g320  {width:310px;}
.g480  {width:470px;}
.g640  {width:630px;}
.g800  {width:790px;}
.g960  {width:950px;}
/* 12 columns */
.g80 {width:70px;}
.g240 {width:230px;}
.g400 {width:390px;}
.g560 {width:550px;}
.g720 {width:710px;}
.g880 {width:870px;}
/* margin */
.ml80{margin-left:90px;}
.ml160{margin-left:170px;}
.ml240{margin-left:250px;}
.ml320{margin-left:330px;}
.ml400{margin-left:410px;}
.ml480{margin-left:490px;}
.ml560{margin-left:560px;}
.ml640{margin-left:650px;}
.ml720{margin-left:730px;}
.ml800{margin-left:810px;}
.ml880{margin-left:890px;}
.ml960{margin-left:970px;}
.inside{margin-left:0;}
p.grid{ padding-left:10px;}
  
.clear {clear:both;}
.clearfix, .main{ display:block;} 
.clearfix:after, .main:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
	 }
body { font:75%/1.5em "lucida grande","lucida sans unicode", sans-serif;}
p { padding:0 0  1em 0;color:#111;}
p.first:first-letter{ float:left;font-family: Palatino,'Palatino Linotype',Georgia, sans-serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em 0.1em 0 0; }
p img       { float: left; margin: 0.3em 0.833em 0.833em 0; padding: 0; }
p img.right { float: right; margin: 0.3em  0 0.833em 0.833em;  }
h1,h2{ font-weight:normal; color: #333; font-family:Georgia, "Times New Roman", serif;  }
h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, "Times New Roman", serif; }
h1 { font-size: 2.2em;  margin-bottom: 0.682em; }
h2 { font-size: 1.9em;  margin-bottom: 0.79em; }
h3 { font-size: 1.7em;  margin-bottom: 0.882em; }
h4 { font-size: 1.4em;  margin-bottom: 1.071em; }
h5,h6 { font-size: 1.3em;  margin-bottom: 1.154em; }
/* Color palete */
.water { color:#5582d1; }
.earth { color:#4e3e2c; }
.air { color:#f1fff7; }
.fire { color:#ff8a19; }
.wine { color:#4a040a; }
.beer { color:#F0C030; }
.caffe { color:#473523; }
.caffe-cream { color:#b68d3d; }
.espresso { color:#2c1901; }
.caramel{ color:#ab671f; }
.chocolate { color:#290200; }
.black-pepper { color:#444334; }
.pepper-lite { color:#8d8a72; }
.lipstick { color:#c20c0c; }

li ul, 
li ol  { margin:0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; }

dl { margin: 0 0 1.5em 0; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.5em; }
a { color:#035292; text-decoration:none; }
a:hover { text-decoration: underline; }

table { margin-bottom:1.5em; border-collapse: collapse; }
th { font-weight:bold; }
tr,th,td { margin:0; padding:0 1.5em 0 1em; height:18px; }
tfoot { font-style: italic; }
caption { text-align:center; font-family:Georgia, serif; }

abbr, acronym { border-bottom:1px dotted #000; }
address { margin-top:1.5em; font-style: italic; }
del {color:#000;}

blockquote { padding:1em 1em 1em 1.5em; font-family:baskerville,"palatino linotype",serif; }
blockquote > *:first-child:before { content:"\201C";font-size:2.5em;margin-left:-.62em;font-family:georgia,serif;padding-right:.2em;color:#aaa;line-height:0; }/* From Tripoli  */
strong { ont-weight: bold; }
em, dfn { font-style: italic; }
dfn { font-weight: bold; }
pre, code { margin: 1.5em 0; white-space: pre; }
pre, code, tt { font: 1em monospace; line-height: 1.5; } 
tt { display: block; margin: 1.5em 0; }
hr { margin-bottom:1.5em; }
/*other small things */
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }
.b { font-weight:bold; }
.i { font-style:italic; }
.indent { text-indent:1.5em;}
.open { font-variant: small-caps; }
p.break { text-align:center;text-indent:0;line-height:0; }
p.zero{padding:0; margin:0}
p.one { padding:0 1em  1em 1em;color:#111;}
p img.right10 { float: right; margin:0.833em;  }
.oldbook { font-family:"Book Antiqua","Warnock Pro","Goudy Old Style","Palatino",Georgia,serif; }
.note { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; margin:0.1em; color:#333; } 
.mono { font-family:"Courier New", Courier, monospace; }

/* CSS Action Framework */
/* On mou<a href="http://www.freemoban.com/tag/seo" target="_blank" class="keylink">seo</a>ver */ 
.h-scale:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}
  
.h-translate:hover {
	-moz-transform:translate(-10px,-10px);
	-webkit-transform:translate(-10px,10px);
	-o-transform:translate(-10px,10px);
	transform:translate(-10px,10px);
}
.h-rotate:hover {
	-moz-transform:rotate(50deg);
	-webkit-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	transform:rotate(50deg);
}
.h-box-shadow:hover {
	-moz-box-shadow: 2px 2px 2px #666; 
	-webkit-box-shadow: 2px 2px 2px #666; 
	box-shadow: 2px 2px 2px #666; 
}
  
.h-multitransform:hover {
	-moz-transform:rotate(70deg) scale(1.5);
	-webkit-transform:rotate(70deg) scale(1.5);
	-o-transform:rotate(70deg) scale(1.5);
	transform:rotate(70deg) scale(1.5);
}
.h-hide:hover {
	-webkit-transition-duration: 3s;
	-moz-transition-duration:3s;
	-o-transition-duration:3s;
	opacity: 0;
}

/* On Click */

.a-scale:active {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
  }
  
.a-translate:active {
	-moz-transform:translate(-10px,-10px);
	-webkit-transform:translate(-10px,10px);
	-o-transform:translate(-10px,10px);
	transform:translate(-10px,10px);
}
.a-rotate:active {
	-moz-transform:rotate(50deg);
	-webkit-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	transform:rotate(50deg);
}
.a-box-shadow:active {
	-moz-box-shadow: 2px 2px 2px #666; 
	-webkit-box-shadow: 2px 2px 2px #666; 
	box-shadow: 2px 2px 2px #666; 
}
.a-multitransform:active {
	-moz-transform:rotate(70deg) scale(1.5);
	-webkit-transform:rotate(70deg) scale(1.5);
	-o-transform:rotate(70deg) scale(1.5);
	transform:rotate(70deg) scale(1.5);
}
.a-hide:active {
	-webkit-transition-duration: 3s;
	-moz-transition-duration:3s;
	-o-transition-duration:3s;
	opacity: 0;
}
/* Target */

.t-scale:target {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
  }
  
.t-translate:target {
	-moz-transform:translate(-10px,-10px);
	-webkit-transform:translate(-10px,10px);
	-o-transform:translate(-10px,10px);
	transform:translate(-10px,10px);
}
.t-rotate:target {
	-moz-transform:rotate(50deg);
	-webkit-transform:rotate(50deg);
	-o-transform:rotate(50deg);
	transform:rotate(50deg);
}
.t-box-shadow:target {
	-moz-box-shadow: 2px 2px 2px #666; 
	-webkit-box-shadow: 2px 2px 2px #666; 
	box-shadow: 2px 2px 2px #666; 
}
.t-multitransform:target{
	-moz-transform:rotate(70deg) scale(1.5);
	-webkit-transform:rotate(70deg) scale(1.5);
	-o-transform:rotate(70deg) scale(1.5);
	transform:rotate(70deg) scale(1.5);
}
.t-hide:target {
	-webkit-transition-duration: 3s;
	-moz-transition-duration:3s;
	-o-transition-duration:3s;
	opacity: 0;
}
</style>
</head>
<body>
<div class="main" >
<div class="g960">
<h5 class="note">Look Ma no JavaScript</h5>
<br />
</div>
<div class="clear"> </div>
<div id="a" class="g160 h-scale" style="border:2px solid red; height:150px">鼠标过来放大</div>
<div class="clear"> </div>
<div id="b" class="g160 h-translate" style="border:2px solid red; height:150px">鼠标过来移位</div>
<div class="clear"> </div>
<div id="c" class="g160 h-rotate" style="border:2px solid red; height:150px">鼠标过来旋转45度</div>
<div class="clear"> </div>
<div id="d" class="g160 h-box-shadow" style="border:2px solid red; height:150px">鼠标过来投影效果</div>
<div class="clear"> </div>
<div id="e" class="g160 h-multitransform" style="border:2px solid red; height:150px">鼠标过来旋转</div>
<div class="clear"> </div>
<div id="f" class="g160 h-hide" style="border:2px solid red; height:150px">鼠标过来慢慢变淡</div>
<div class="clear"> </div>
</div>
</body>
</html>

上篇：手机浏览提示CSS样式

下篇：制作进度条代码

本文地址：https://www.freemoban.com/bjrm/2015/0407/1265.html

猜你喜欢