css實現的滑鼠滑過星星高亮效果

antzone發表於2017-03-13
CSS

關於星星評分效果大家一定都不會陌生，當滑鼠滑過的時候會使相應的星星變得高亮，下面就介紹一下如何利用css實現此功能，當然並不是完整的評分功能，僅僅是如何使滑過的星星實現高亮效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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>

上面的程式碼實現了我們的要求當滑鼠滑過的時候能夠實現五角星高亮效果。

相關文章