请问CSS如何设置鼠标悬停图片自动放大鼠标掠过图片自动恢复原样

html-css017

请问CSS如何设置鼠标悬停图片自动放大鼠标掠过图片自动恢复原样,第1张

#demo{overflow:hiddenwidth:120pxtext-align:centerpadding:10px}#demo img{border:nonewidth:100pxheight:100pxborder:5px solid #f4f4f4}#enlarge_images{position:absolutedisplay:nonez-index:2border:5px solid #f4f4f4}

">var demo = document.getElementById("demo")var gg = demo.getElementsByTagName("img")var ei = document.getElementById("enlarge_images")for(i=0i var ts = gg[i] ts.onmousemove = function(event){ event = event || window.event ei.style.display = "block" ei.innerHTML = '' ei.style.top = document.body.scrollTop + event.clientY + 10 + "px" ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px" } ts.onmouseout = function(){ ei.innerHTML = "" ei.style.display = "none" } ts.onclick = function(){ window.open( this.src ) }}

<style type="text/css">a:link{ display:blockfont-size:12px}a:visited{}a:hover{ font-size:16px}a:active{}</style>用CSS伪类可以实现鼠标移至链接上改变样式，这段代码就可以实现

可以参考一下，看看行不行。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>CSS3旋转</title>

<style>

.rotate {

width: 100px

height: 100px

background: #92B901

-webkit-transition: -webkit-transform 2s

}

.rotate:hover {

-webkit-transform: rotate(360deg)

}

</style>

</head>

<body>

<div class="rotate">rotate</div>

</body>

</html>