cari

Rumah  >  Artikel  >  hujung hadapan web  >  CSS atau JS untuk melaksanakan tuding tetikus untuk memaparkan kemahiran element_javascript yang lain

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

WBOY
WBOYasal
2016-05-16 15:18:401409semak imbas

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");
});

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;
}

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;
}。
Elemen gaya: .b {

height: 40px;
width: 100%;
background-color: #2a7193;
position: absolute;
z-index: 10006;
display: none;
margin-top: -5px;
left: 0;
}
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>
Css yang sepadan: 

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

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>
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Kaedah JavaScript untuk mencapai kemahiran conversion_javascript separuh lebar penuhArtikel seterusnya：Kaedah JavaScript untuk mencapai kemahiran conversion_javascript separuh lebar penuh

Artikel berkaitan

Lihat lagi