ホームページ >ウェブフロントエンド >htmlチュートリアル >css_html/css_WEB-ITnose に実装されている星上のマウスの強調表示効果
css_html/css_WEB-ITnose に実装されている星上のマウスの強調表示効果
- WBOYオリジナル
- 2016-06-24 11:28:511021ブラウズ
マウスをスライドさせると、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/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。