js鼠标放到图片上图片背景变色该怎么写

JavaScript014

js鼠标放到图片上图片背景变色该怎么写,第1张

这个简单

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>