ホームページ >ウェブフロントエンド >htmlチュートリアル >css_html/css_WEB-ITnose を使用してマウスをホバーしたときに説明レイヤーをポップアップする効果
css_html/css_WEB-ITnose を使用してマウスをホバーしたときに説明レイヤーをポップアップする効果
- WBOYオリジナル
- 2016-06-24 11:27:281465ブラウズ
CSS を使用してマウスがホバーしているときに説明レイヤーをポップアップする効果:
この章ではコード例を共有します。これは、純粋な CSS を使用してマウスがホバーしているときに説明レイヤーをポップアップする効果です。
コード例は次のとおりです。
<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style>div{ clear:both; margin:5px 0 0 0; font-size:12px; line-height:22px;}a.alt{ position:relative; background-color:#fff; float:left; width:158px; height:20px; margin:0 auto; border:1px solid #eee; text-align:center; text-decoration:none; color:#0066cc;}a.alt:hover{ background:#fff; text-decoration:none; z-index:2;}a.alt span{ display:none;}a.alt:hover span{ position:absolute; display:block; top:-1px; left:158px; width:130px; height:30px; border:1px solid #eee; z-index:1;}</style></head><body><div><a class="alt" href="/"><span>前端网站</span>蚂蚁部落</a></div><div><a class="alt" href="/"><span>网址是softwhy.com</span>antzone</a></div></body></html> デフォルトでは、span 要素は非表示になっています。マウスをホバーすると、次の CSS コードがすぐに有効になります:
a.alt:hover span{ position:absolute; display:block; top:-1px; left:158px; width:130px; height:30px; border:1px solid #eee; z-index:1;} このポップアップを作成するには、絶対位置を使用します。レイヤー リンクの右側に配置されます。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=18143
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。