当我们用鼠标滑动浏览网页时,总会被突然变化的图片吸引目光,这大大的提高了用户体验,带来更高的效率。那么本篇文章就是主要介绍用css怎么控制鼠标划过时变化图片,有需要的朋友可以参考一下。
CSS控制鼠标划过时变换图片的具体代码示例如下:
<style type="text/css"> .demo { width:500px; height:400px; text-decoration:none; display:block; background-image:url(1.png); background-position:0px 0; background-repeat: no-repeat; } .demo:hover,.demo:active { background-position:0 0; background-image: url(2.png); }</style> </head> <body> <a href="http://www.php.cn" class="demo"> </a> </body>
注:
CSS :hover 选择器用于选择鼠标指针浮动在上面的元素并且可用于所有元素,不只是链接。
【相关文章推荐】
以上是CSS怎么控制鼠标划过时变换图片?的详细内容。更多信息请关注PHP中文网其他相关文章!