CSS atau JS untuk melaksanakan tuding tetikus untuk memaparkan kemahiran element

CSS atau JS untuk melaksanakan tuding tetikus untuk memaparkan kemahiran element_javascript yang lain

WBOY

Lepaskan： 2016-05-16 15:18:40

asal

1418 orang telah melayarinya

Jika anda ingin menuding tetikus pada elemen a dan memaparkan elemen b yang lain, anda boleh melakukannya melalui css atau js.

js:

Tulis dua fungsi: mouseenter, mouseleave, contohnya: di mana

$("#a").mouseenter(function() {
$("#b").show("normal");
});
$("#a").mouseleave(function() {
$("#b").hide("normal");
});

Salin selepas log masuk

css: elemen dan elemen b perlu memenuhi perhubungan tertentu, iaitu, b ialah elemen anak langsung a: seperti berikut elemen html, div header_login_name_change ialah elemen, ul header_login_menu ialah elemen b.

Tulis tuding pada elemen a, diikuti dengan elemen 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;
}

Salin selepas log masuk

Selain itu, jika lebar elemen b perlu memenuhi skrin, dan elemen di dalamnya perlu dijauhkan dari kiri, dsb., maka gaya b adalah seperti berikut: lebar: 100%, kedudukan: mutlak.
Letakkan elemen di dalamnya melalui div di bawah b. Div ialah c dalam contoh

.c {
width: 1280px;
margin: auto;
}。

Salin selepas log masuk

Elemen gaya: .b {

height: 40px;
width: 100%;
background-color: #2a7193;
position: absolute;
z-index: 10006;
display: none;
margin-top: -5px;
left: 0;
}

Salin selepas log masuk

Dengan cara ini, unsur-unsur dalam c boleh diletakkan secara relatif kepada c, dan ia tidak akan cacat tidak kira betapa lebarnya skrin komputer.

kod 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>

Salin selepas log masuk

Css yang sepadan:

#a:hover .b{
display: block;
}

Salin selepas log masuk

kaedah ps:css untuk merealisasikan gesaan lapisan slaid keluar apabila tetikus melayang

Contoh dalam artikel ini menerangkan kaedah menggunakan CSS untuk merealisasikan gesaan lapisan slaid keluar apabila tetikus melayang. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Ini ialah kesan gesaan alih tetikus yang mudah, serupa dengan teg alt, tetapi yang ini dilaksanakan dengan CSS tulen, mempunyai kebolehskalaan yang baik dan anda boleh menambah imej atau reka letak lain pada lapisan gesaan. Ini bergantung pada keperluan anda perlukan.

Kod adalah seperti berikut:

<!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>

Salin selepas log masuk