您的位置: 首页  >  文章  >  怎么用纯css写的评分鼠标移入的效果

怎么用纯css写的评分鼠标移入的效果

分类: 文章 • 2022-09-21 15:36:36

这篇文章主要讲解了“怎么用纯css写的评分鼠标移入的效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用纯css写的评分鼠标移入的效果”吧！


代码如下:

<!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" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> <style> * { margin: 0; padding: 0; } span { display: block; width: 30px; height: 30px; padding-left: 30px; background-image: url(http://images.cnitblog.com/blog/294743/201304/21141707-77236dc5976d4f7db624bf3a5d2eee28.gif); background-repeat: no-repeat; background-position: 0 -3px; } span span span span span { padding-left: 0; } span:hover { background-position: 0 -31px; } </style> <span> <span> <span> <span> <span></span> </span> </span> </span> </span> </body> </html>

效果如下
怎么用纯css写的评分鼠标移入的效果

感谢各位的阅读，以上就是“怎么用纯css写的评分鼠标移入的效果”的内容了，经过本文的学习后，相信大家对怎么用纯css写的评分鼠标移入的效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！

相关推荐