a 요소 위에 마우스를 올리고 다른 요소 b를 표시하려면 CSS나 js를 통해 수행할 수 있습니다.
js:
mouseenter, mouseleave라는 두 가지 함수를 작성합니다. 예를 들면 다음과 같습니다.
$("#a").mouseenter(function() { $("#b").show("normal"); }); $("#a").mouseleave(function() { $("#b").hide("normal"); });
css: a 요소와 b 요소는 특정 관계를 충족해야 합니다. 즉, b는 a의 직접 하위 요소입니다. 다음과 같이 html 요소, div header_login_name_change는 a 요소, ul header_login_menu는 b 요소입니다.
a 요소 위에 hover를 작성하고 그 뒤에 b 요소를 작성하세요
<div id="a" class="a"> <a class="content"><span id="txt">苹果</span></a> <a class="role_down"></a> <ul class="b"> <li class="role">栗子</li> </ul> </div> css,display: block; .a:hover .b { display:block; background: #2B7193; cursor: pointer; }
또한 요소 b의 너비가 화면을 채워야 하고 그 안에 있는 요소가 왼쪽에서 떨어져 있어야 하는 경우 등 b의 스타일은 다음과 같습니다: 너비: 100%, 위치: 절대.
아래 div를 통해 요소를 배치합니다. b. 예제에서는 div가 c입니다.
.c { width: 1280px; margin: auto; }。
스타일 요소: .b {
height: 40px; width: 100%; background-color: #2a7193; position: absolute; z-index: 10006; display: none; margin-top: -5px; left: 0; }
이런 방식으로 c의 요소는 c를 기준으로 배치될 수 있으며 컴퓨터 화면이 아무리 넓어도 변형되지 않습니다.
html 코드:
<div class="a" id="a"> <div class="btn"></div> <div id="b" class="b"> <div class="c"> <div class="rcontent" id="content"> <a class="dropdown_content"> <span>花生</span> </a> </div> </div> </div> </div>
해당 CSS:
#a:hover .b{ display: block; }
마우스를 가리키면 슬라이드 아웃 레이어 프롬프트를 구현하는 ps:css 메소드
이 기사의 예에서는 CSS를 사용하여 마우스를 올렸을 때 슬라이드 아웃 레이어 프롬프트를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.
alt 태그와 유사한 간단한 마우스오버 프롬프트 효과이지만 순수 CSS로 구현되어 확장성이 좋으며 프롬프트 레이어에 이미지나 기타 레이아웃을 추가할 수 있습니다. 필요.
코드는 다음과 같습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css实现层提示</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:60px; 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>给你实用的CSS代码</span>网页特效库</a> </div> </body> </html>