滑鼠移動到物在下面件顯示一個區塊(jquery版)
發表於 : 17-01-2010 | 作者 : mbdmt chino
分類 : HTML & JAVASCRIPT |
0
如果要指定某一個容器想要做mouseover顯示另一個區塊的效果，那就可以參考這篇
先看圖示
語法如下:
<!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>mouseover_jquery</title>
<style type="text/css">
<!--
.goods {
background-color: #FF9900;
margin: 10px;
float: left;
height: 100px;
width: 100px;
position: relative;
}
#gshow {
position: absolute;
display:none;
height: 100px;
width: 100px;
top: 200px;
left: 40px;
background-image: url(images/xxxxx.gif);//無效背景圖
}
.out {
height:100%;
width: 440px;
position: relative;
overflow-x: hidden;
overflow-y:auto;
margin: 15px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
function gover(object,shobject) {
var gshowf=document.getElementById(object);
var gposition = $('#'+object).offset(); //物件座標xy
var gx = gposition.left;
var gy = gposition.top;
var gshowoj=document.getElementById(shobject);
gshowoj.style.position='absolute';
gshowoj.style.top=(gy+100)+'px';
gshowoj.style.left=gx+'px';
gshowoj.style.display="block";
}
function gout(object) {
document.getElementById(object).style.display="none";
}
function gover2(object) {
document.getElementById(object).style.display="block";
}
//-->
</script>
</head>
<body>
<div id="out" class="out">
<div class="goods" id="g1" onmouseover="gover('g1','gshow')" onmouseout="gout('gshow')"> class "goods" 的內容放在這裡</div>
<div class="goods" id="g2" onmouseover="gover('g2','gshow')" onmouseout="gout('gshow')"> class "goods" 的內容放在這裡</div>
<div class="goods" id="g3" onmouseover="gover('g3','gshow')" onmouseout="gout('gshow')"> class "goods" 的內容放在這裡</div>
<div class="goods" id="g4" onmouseover="gover('g4','gshow')" onmouseout="gout('gshow')"> class "goods" 的內容放在這裡</div>
<div class="goods" id="g5" onmouseover="gover('g5','gshow')" onmouseout="gout('gshow')"> class "goods" 的內容放在這裡</div>
<div class="goods" id="g6" onmouseover="gover('g6','gshow')" onmouseout="gout('gshow')"> class "goods" 的內容放在這裡</div>
<div class="goods"> class "goods" 的內容放在這裡</div>
<div class="goods"> class "goods" 的內容放在這裡</div>
<div class="goods"> class "goods" 的內容放在這裡</div>
<div class="goods"> class "goods" 的內容放在這裡</div>
<div class="goods"> class "goods" 的內容放在這裡</div>
<div class="goods"> class "goods" 的內容放在這裡</div>
</div>
<div id="gshow" onmouseover="gover2('gshow')" onmouseout="gout('gshow')"><img id="bjimg" border=1 src="mbmail.gif" /></div>
</body>
</html>
補充:
IE下mouseover在DIV上，如果無指定背景色或背景圖，則一定要移動在裡面的文字或圖才會有效
但如果你是希望整塊DIV大小都能有效被觸碰，又希望DIV物無色透明，那就是指定一張無效背景圖即可
下載範例檔
mouseover_jquery