為什麼這篇滑 鼠 移 開 CSS鄉民發文收入到精華區：因為在滑 鼠 移 開 CSS這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者cokellen (非本人)看板Web_Design標題Re: [問題] 如何將DIV出現在滑鼠...
※ 引述《etchen (Mier)》之銘言：
: 我有設置一個隱藏的DIV，
: 我想在滑鼠點選圖片A後，DIV的左上角貼在A圖片的右下角出現，
: 要如何做呢？
: 謝謝。
: ┌┐
: └┘┌───┐
: │ div │
: └───┘
先假設你要的效果是tooltip:當滑鼠指標移動到指定的Tag範圍時,會在滑鼠指標旁
出現你設定的浮動div區塊,裡面可以是文字敘述或是圖片,當滑鼠離開範圍時,div區塊
消失。
這種效果利用Javascript來作,名稱叫做tooltip,簡單寫個文字敘述的tooltip的效果
,你要的顯示圖片,只需要改成<img src="">來代替文字內容即可
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tooltip</title>
<!-- 引入jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
type="text/javascript"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
color:#555;
line-height:180%;
}
p{
clear:both;
margin:0;
padding:.5em 0;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
/*設定tooltip的div區塊和滑鼠指標之間的距離,x軸距及y軸距,
避免tooltip的div和滑鼠指標太接近*/
var x = 10;
var y = 20;
/*指定TagName為a且其CalssName=tooltip的Tag,
當滑鼠移到其上面時進行函式動作*/
$("a.tooltip").mouseover(function(e){
/*將此Tag的title的值給予到newTitle,接著將title的值空白,
避免滑鼠移到Tag時,同時出現tooltip及title的效果*/
this.newTitle = this.title;
this.title = "";
/*建立tooltip用來儲存你要顯示的內容,而內容就是由div區塊所組成;
這範例是用文字來作,你要的圖片效果,只要在div中加入<img src>*/
var tooltip = "<div id='tooltip'>"+ this.newTitle +"<\/div>";
/*利用.append()把這段div加到body,而條件就是:
當滑鼠指標移動你指定的Tag的範圍時,才會加入*/
$("body").append(tooltip);
/*利用.css()設定tooltip的css,其中e.pageY及e.pageX就是滑鼠指標
的座標,避免tooltip和滑鼠指標太靠近,後面加上前面設定的x及y*/
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
/*利用.show()讓tooltip這段div區塊顯示*/
}).show("fast");
/*當滑鼠移開時,將newTitle的值還給title,
並且利用.remove()將tooltip這段div區塊移除*/
}).mouseout(function(){
this.title = this.newTitle;
$("#tooltip").remove();
/*當滑鼠指標在指定的Tag範圍內移動時,
tooltip的div區塊也會隨著滑鼠指標作移動*/
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="這是提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="這是提示2.">提示2.</a></p>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.36.41.188