CSS中如何让鼠标经过时显示背景图片
<body><tablewidth="910"height="31"border="1"align="center"><tr><tdwidth="895"height="...
<body>
<table width="910" height="31" border="1" align="center">
<tr>
<td width="895" height="22"> </td>
</tr>
</table>
<table width="900" height="515" border="1" align="center">
<tr>
<td width="295" height="167" background="背景2.jpg"><img src="005.gif" width="295" height="167" /></td>
<td width="293" height="167"><img src="001.gif" width="295" height="167" /></td>
<td width="295" height="167"><img src="006.gif" width="295" height="167" /></td>
</tr>
</table>
</body>
</html>
如果要让鼠标到了005.gif时显示背景2.jpg，离开后还原，要怎么改，先谢谢啦~~~~~~~~ 展开
<table width="910" height="31" border="1" align="center">
<tr>
<td width="895" height="22"> </td>
</tr>
</table>
<table width="900" height="515" border="1" align="center">
<tr>
<td width="295" height="167" background="背景2.jpg"><img src="005.gif" width="295" height="167" /></td>
<td width="293" height="167"><img src="001.gif" width="295" height="167" /></td>
<td width="295" height="167"><img src="006.gif" width="295" height="167" /></td>
</tr>
</table>
</body>
</html>
如果要让鼠标到了005.gif时显示背景2.jpg，离开后还原，要怎么改，先谢谢啦~~~~~~~~ 展开
1个回答
展开全部
通常可以使用css样式的 :hover 选择器， 如示例div1。
也可以使用js来控制css样式，用js可以灵活加入其它效果(延迟显示、随机背景图)， 如示例div2。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1{
width: 150px;
height: 150px;
}
.d1:hover{ /*在这里使用hover 来改变背景图 */
background:url(2531170_142659950000_2.jpg);
}
.d2{
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="d1">
div1
</div>
<div class="d2" onmouseover="showbg(this)" onmouseout="hidebg(this)"> <!--分别设置了鼠标进入、离开的事件 -->
div2
</div>
</body>
<script>
function showbg(e){
e.style.background="url(2531170_142659950000_2.jpg)"; //用javascript来改变背景图片样式
}
function hidebg(e){
e.style.background="none";
}
</script>
</html>
*具体选择根据需要灵活应用
*注意示例图片要引用正确
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
