[英]Javascript tooltip help and color change
我對Java相當陌生。 現在,我需要的是我的projectXYZ中有一個鏈接,該鏈接指向另一個projectABC。 我需要更改鏈接的顏色,並為鏈接的MouseOver事件顯示一個工具提示對話框。
我試圖更改顏色,但使用工具提示無法成功。 是否有滿足這些要求的組合解決方案?
提前致謝。
通常說來,在巡回DIV中添加一個“ title”屬性就足夠了,它將作為鼠標懸停時的工具提示顯示。
但是要使基本工具提示具有正確的位置,可以使用以下內容。 我用過它,它的工作原理!
JS(將具有兩個方法,showTip和hideTip):
<script type="text/javascript">
function showtip(e,message) {
var x=0;
var y=0;
var m;
var h;
if(!e)
var e=window.event;
if(e.pageX||e.pageY) { x=e.pageX; y=e.pageY; }
else if(e.clientX||e.clientY)
{ x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;}
m=document.getElementById('myTooltip');
if((y>10)&&(y<450))
{ m.style.top=y-4+"px"; }
else{ m.style.top=y+4+"px"; }
var messageHeigth=(message.length/20)*10+25;
if((e.clientY+messageHeigth)>510)
{ m.style.top=y-messageHeigth+"px"; }
if(x<850) { m.style.left=x+20+"px"; }
else{ m.style.left=x-170+"px"; }
m.innerHTML=message;m.style.display="block";m.style.zIndex=203;
}
function hidetip(){
var m;
m=document.getElementById('myTooltip');m.style.display="none";
}
</script>
CSS:
<style type="text/css">
#myTooltip{padding: 5px; background-color: #FFF8DC; border: 1px solid #DEB887; width:180px;font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #6b6b6b; display:none; position:absolute;left:0px;top:0px; }
</style>
HTML(在href下方將有一個額外的DIV來顯示工具提示):
<a href="javascript:void(0)" onmouseover="showtip(event, 'Sample tooltip text');"
onmouseout="hidetip();">Hover mouse to see tooltip text.</a>
<div id="myTooltip" ></div>
希望能幫助到你 !!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.