CSS或者JS實現(xiàn)鼠標(biāo)懸停顯示另一元素

更新時間：2016年01月22日 10:32:24 作者：云兒且行且珍惜

這篇文章主要介紹了CSS或者JS實現(xiàn)鼠標(biāo)懸停顯示另一元素的相關(guān)資料,需要的朋友可以參考下

想達(dá)到鼠標(biāo)懸停到元素a上，顯示另一個元素b，可以通過css實現(xiàn)也可以通過js實現(xiàn)。

js:

寫兩個函數(shù)：mouseenter，mouseleave，例如：其中

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

css：a元素和b元素需要滿足一定的關(guān)系，即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 樣式如下：需要設(shè)置width: 100%, position:absolute.
通過b下面的div來為其中的元素定位，該div也就是例子中的c，設(shè)置居中：

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

對應(yīng)的css：

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

ps:css實現(xiàn)鼠標(biāo)懸停時滑出層提示的方法

本文實例講述了css實現(xiàn)鼠標(biāo)懸停時滑出層提示的方法。分享給大家供大家參考。具體分析如下：

這是一個簡單的鼠標(biāo)懸停提示特效，類似于alt標(biāo)簽，不過這一種是用純CSS實現(xiàn)，擴展性好，而且在提示的層里可以加入圖片或其它布局，這個要根據(jù)你的需要了。

代碼如下:

<!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實現(xiàn)層提示</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>一個高品質(zhì)腳本資料網(wǎng)站</span>腳本之家</a>
</div>
<div>
<a class='alt' href="/"><span>給你實用的CSS代碼</span>網(wǎng)頁特效庫</a>
</div>
</body>
</html>

您可能感興趣的文章: