纯css实现方式：
<style>
#test {width:400pxheight:300pxbackground:url(图片1) no-repeat center / cover}
#test:hover {background-image:url(图片2)}
</style>
<div id=test></div>
js实现方式：
<img id=test src="图片1" />
<script>
test.onmouseover=()=>this.src="图片2"
test.onmouseout=()=>this.src="图片1"
</script>
<html><head>
<title>title及alt提示特效</title>
<style type="text/css">
body{font-size:12pxcolor:#000000}
td{font-size:12pxcolor:#000000}
a:link{font-size:12pxcolor:#000000}
</style>
<script language="javascript">
var pltsPop=null
var pltsoffsetX = 12// 弹出窗口位于鼠标左侧或者右侧的距离；3-12 合适
var pltsoffsetY = 15// 弹出窗口位于鼠标下方的距离；3-12 合适
var pltsTitle=""
document.write('<div id=pltsTipLayer style="display: noneposition: absolutez-index:10001"></div>')
function pltsinits()
{
document.onmouseover = plts
document.onmousemove = moveToMouseLoc
}
function plts()
{ var o=event.srcElement
if(o.alt!=null && o.alt!=""){o.dypop=o.alto.alt=""}
if(o.title!=null && o.title!=""){o.dypop=o.titleo.title=""}
pltsPop=o.dypop
if(pltsPop!=null &&pltsPop!="" &&typeof(pltsPop)!="undefined")
{
pltsTipLayer.style.left=-1000
pltsTipLayer.style.display=''
var Msg=pltsPop.replace(/\n/g,"<br>")
Msg=Msg.replace(/\0x13/g,"<br>")
var re=/\{(.[^\{]*)\}/ig
if(!re.test(Msg))pltsTitle="『水木设计联盟』"
else{
re=/\{(.[^\{]*)\}(.*)/ig
pltsTitle=Msg.replace(re,"$1")+" "
re=/\{(.[^\{]*)\}/ig
Msg=Msg.replace(re,"")
Msg=Msg.replace("<br>","")}
var content =
'<table style="FILTER:alpha(opacity=90)border: 1px solid #cccccc" id="toolTipTalbe" cellspacing="1" cellpadding="0"><tr><td width="100%"><table bgcolor="#ffffff" cellspacing="0" cellpadding="0">'+
'<tr id="pltsPoptop"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="topleft" align="left">↖'+pltsTitle+'</p><p id="topright" align="right" style="display:none">'+pltsTitle+'↗</font></b></font></td></tr>'+
'<tr><td "+attr+" style="padding-left:10pxpadding-right:10pxpadding-top: 8pxpadding-bottom:6pxline-height:140%">'+Msg+'</td></tr>'+
'<tr id="pltsPopbot" style="display:none"><td height="20" bgcolor="#0094bb"><font color="#ffffff"><b><p id="botleft" align="left">↙'+pltsTitle+'</p><p id="botright" align="right" style="display:none">'+pltsTitle+'↘</font></b></font></td></tr>'+
'</table></td></tr></table>'
pltsTipLayer.innerHTML=content
toolTipTalbe.style.width=Math.min(pltsTipLayer.clientWidth,document.body.clientWidth/2.2)
moveToMouseLoc()
return true
}
else
{
pltsTipLayer.innerHTML=''
pltsTipLayer.style.display='none'
return true
}
}
function moveToMouseLoc()
{
if(pltsTipLayer.innerHTML=='')return true
var MouseX=event.x
var MouseY=event.y
var popHeight=pltsTipLayer.clientHeight
var popWidth=pltsTipLayer.clientWidth
if(MouseY+pltsoffsetY+popHeight>document.body.clientHeight)
{
popTopAdjust=-popHeight-pltsoffsetY*1.5
pltsPoptop.style.display="none"
pltsPopbot.style.display=""
}
else
{
popTopAdjust=0
pltsPoptop.style.display=""
pltsPopbot.style.display="none"
}
if(MouseX+pltsoffsetX+popWidth>document.body.clientWidth)
{
popLeftAdjust=-popWidth-pltsoffsetX*2
topleft.style.display="none"
botleft.style.display="none"
topright.style.display=""
botright.style.display=""
}
else
{
popLeftAdjust=0
topleft.style.display=""
botleft.style.display=""
topright.style.display="none"
botright.style.display="none"
}
pltsTipLayer.style.left=MouseX+pltsoffsetX+document.body.scrollLeft+popLeftAdjust
pltsTipLayer.style.top=MouseY+pltsoffsetY+document.body.scrollTop+popTopAdjust
return true
}
pltsinits()
</script>
</head>
<body>
链接提示效果：<a href="http://www.lanrentuku.com/" target="_blank" title="title及alt提示特效,本程序由水木设计联盟整理推荐，希望大家喜欢">一个很酷的鼠标悬停特效，但有问题指教，我想知道怎么控制悬停时间</a>
<img src="http://www.mb5u.com/images/logo.gif" alt="模板无忧1号站">
<img src="http://www.mb5u.com/images/logo.gif" alt="模板无忧2号站">
<a href="#"><img src="http://www.mb5u.com/images/logo.gif" alt="模板无忧3号站" border="0"></a>
<div style="visibility:hiddenborder:0px solid #000000background-color:#333333font-size:12pxcolor:#6699ccposition:absolute" id=altlayer></div>
<script>
document.body.onmousemove=quickalt
function quickalt() {
if (event.srcElement.hint)event.srcElement.alt=event.srcElement.hint
if(event.srcElement.alt &&event.srcElement.alt!='') {
event.srcElement.hint=event.srcElement.alt
altlayer.style.visibility='visible'
altlayer.style.left=event.x-1
altlayer.style.top=event.y+16
altlayer.innerHTML=event.srcElement.hint
event.srcElement.alt=""
}
else altlayer.style.visibility='hidden'}
</script>
</body>
</html>
看看这个
