다른 element_javascript 기술을 표시하기 위해 마우스 호버를 구현하는 CSS 또는 JS-JS 튜토리얼-php.cn

다른 element_javascript 기술을 표시하기 위해 마우스 호버를 구현하는 CSS 또는 JS

WBOY

풀어 주다： 2016-05-16 15:18:40

원래의

1422명이 탐색했습니다.

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>

로그인 후 복사