ホームページ > 記事 > ウェブフロントエンド > CSSはmouse_html/css_WEB-ITnoseで動画の切り替え機能を実現します
CSSはmouse_html/css_WEB-ITnoseで動画の切り替え機能を実現します
- WBOYオリジナル
- 2016-06-24 11:36:571033ブラウズ
CSS は画像上でマウスを移動する切り替え機能を実現します:
画像上にマウスを置くと他の画像に切り替えることができます。 CSS の使い方を紹介します。この機能を実現するために。
コード例は以下の通りです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><head><title>CSS实现的图片切换效果-蚂蚁部落</title><style type="text/css">* { margin:0; padding:0;}ul li { list-style:none;}.nav { width:800px; height:40px; margin:150px auto;}.nav ul li { float:left; width:200px;}.nav ul li a:link, a:visited { display:block; width:190px; height:40px; background:url(images/wall_s1.jpg);}.nav ul li a:hover { background:url(images/wall_s2.jpg);}.nav ul li a:active { background:url(images/wall_s3.jpg);}</style></head><body><div class="nav"> <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul></div></body></html> 上記のコードを実装すると、リンク上にマウスを置くと画像切り替え機能が実現できます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=8354
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。