CSS或JS實作滑鼠懸停顯示另一個元素_javascript技巧
- WBOY原創
- 2016-05-16 15:18:401437瀏覽
想達到滑鼠懸停到元素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 樣式如下：需要設定width: 100%, position:absolute.
透過b下面的div來為其中的元素定位，該div也就是範例中的c，設定居中：
.c {
width: 1280px;
margin: auto;
}。
元素a樣式：.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>
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn