求助JS图片在鼠标放上去时显示文字特效

JavaScript032

求助JS图片在鼠标放上去时显示文字特效,第1张

其实用jquery很好实现。把图片放到一个div中，当鼠标悬浮到这个div的时候，触发jquery中的方法，给这个div填充内容，内容为你的文字，比如你的div的id叫“a”。你可以写$("#a").text("这里是你的文字")当这条语句被执行，那么id叫做a的div中的内容就变成了"这里是你的文字"。而你鼠标移出这个div的时候，可以触发一个方法，如同前面，重新把图片填充进"a"中

<!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>test</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script>

$(function(){

$("#div1").hover(function(){

 $(this).find("span").show()

},function(){

 $(this).find("span").hide()

})

})

</script>

<style>

#div1 {width:200px height:200pxposition:relativeborder:1px solid #dddmargin:0}

#div1 img{ width:200px height:200px} 

#div1 span{ position:absolute top:0 left:0 width:100% height:100% display:none background:rgba(0,0,0,.3) z-index:1 color:#FFF}

</style>

</head>

<body>

<div id="div1">

         <img src="http://img2.niushe.com/upload/201306/26/11-51-25-86-59983.jpg" />

         <span>这里是文字文字</span>

    </div>

</body>

</html>