1、重点在,图片的背景是透明的,png格式的。
2、鼠标放在图片上的时候,改变的是块级元素的背景。
举例
<div><img src="xx.png"></div>
鼠标放上去之后,改变的是div的背景。就这样效果就可以实现了。
其实用jquery很好实现。把图片放到一个div中,当鼠标悬浮到这个div的时候,触发jquery中的方法,给这个div填充内容,内容为你的文字,比如你的div的id叫“a”。你可以写$("#a").text("这里是你的文字")当这条语句被执行,那么id叫做a的div中的内容就变成了"这里是你的文字"。而你鼠标移出这个div的时候,可以触发一个方法,如同前面,重新把图片填充进"a"中<html><head>
<title></title>
<style>
#d1{
position : absolute
left : 300px
top : 10px
width : 50px
height : 50px
background-color : red
z-index : 2
display : none }
</style>
<!-- 修改left : 300px top : 10px 的值可以控制提示框的位置 -->
</head>
<body>
<p>asdfasdfasdfsdfdfg<a href="#" onmouseover="show()" onmouseout="hidden()">鼠标放上来看看</a>sdfhdfh</p>
<div id="d1"></div>
</body>
<script language="javascript" type="text/javascript">
var d1 = document.getElementById('d1')
function show()
{
d1.style.display = 'block'
}
function hidden()
{
d1.style.display = 'none'
}
</script>
</html>