首頁 > 開發者 > JavaScript
css實現的滑鼠滑過星星高亮效果，css滑過星星高亮
css實現的滑鼠滑過星星高亮效果:
關於星星評分效果大家一定都不會陌生，當滑鼠滑過的時候會使相應的星星變得高亮，下面就介紹一下如何利用css實現此功能，當然並不是完整的評分功能，僅僅是如何使滑過的星星實現高亮效果。
代碼執行個體如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>螞蟻部落</title><style type="text/css"> *{ margin:0; padding:0; } span{ display:block; width:30px; height:30px; padding-left:30px; background-image:url(mytest/demo/star.gif); background-repeat:no-repeat; background-position:0 -3px; } span span span span span{ padding-left:0; } span:hover{ background-position:0 -31px; } </style> </head><body><span> <span> <span> <span> <span></span> </span> </span> </span> </span></body></html>
上面的代碼實現了我們的要求當滑鼠滑過的時候能夠實現五角星高亮效果。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15064
更多內容可以參閱:http://www.softwhy.com/divcss/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
