改进这段代码让它有鼠标移入图片改变的效果<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> table{ margin: 100px auto; } td{ text-align: center; } </style> </head> <body> <table border="1" width="310px" cellspacing="0" align="center" > <tr> <td>女靴</td> <td rowspan="9"><img src="../images/女靴.jpg"></td> <td>女包</td> </tr> <tr> <td>雪地靴</td> <td>男包</td> </tr> <tr> <td>冬裙</td> <td>登山鞋</td> </tr> <tr> <td>呢大衣</td> <td>皮带</td> </tr> <tr> <td>毛衣</td> <td>围巾</td> </tr> <tr> <td>棉服</td> <td>皮衣</td> </tr> <tr> <td>女裤</td> <td>男毛衣</td> </tr> <tr> <td>羽绒服</td> <td>男棉服</td> </tr> <tr> <td>牛仔裤</td> <td>男靴</td> </tr> </table> <script src="../jquery-3.7.0.js"></script> <script type="text/javascript"> $(function(){ $("tr td")mouseenter(function(){ $("img").prop("src","../ima/女靴.jpg") }) }) </script> </body> </html>
时间: 2023-07-09 09:43:57 浏览: 91
<meta>元素-html基础教程
你可以在 `$("tr td")mouseenter()` 方法中,使用 `$(this)` 获取当前鼠标移入的单元格,然后再使用 `$(this).next()` 获取该单元格后面的图片元素,最后改变图片的 `src` 属性即可实现鼠标移入图片改变的效果,示例如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
table{
margin: 100px auto;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table border="1" width="310px" cellspacing="0" align="center" >
<tr>
<td>女靴</td>
<td rowspan="9"><img src="../images/女靴.jpg"></td>
<td>女包</td>
</tr>
<tr>
<td>雪地靴</td>
<td>男包</td>
</tr>
<tr>
<td>冬裙</td>
<td>登山鞋</td>
</tr>
<tr>
<td>呢大衣</td>
<td>皮带</td>
</tr>
<tr>
<td>毛衣</td>
<td>围巾</td>
</tr>
<tr>
<td>棉服</td>
<td>皮衣</td>
</tr>
<tr>
<td>女裤</td>
<td>男毛衣</td>
</tr>
<tr>
<td>羽绒服</td>
<td>男棉服</td>
</tr>
<tr>
<td>牛仔裤</td>
<td>男靴</td>
</tr>
</table>
<script src="../jquery-3.7.0.js"></script>
<script type="text/javascript">
$(function(){
$("tr td").mouseenter(function(){
$(this).next().find("img").prop("src","../ima/女靴.jpg");
});
$("tr td").mouseleave(function(){
$(this).next().find("img").prop("src","../images/女靴.jpg");
});
});
</script>
</body>
</html>
```
在上述代码中,我使用 `$(this).next().find("img")` 获取了当前单元格后面的图片元素,并使用 `prop("src","...")` 方法改变了图片的 `src` 属性。同时,我还添加了 `mouseleave` 事件,用于在鼠标移出单元格时将图片改回原始状态。
阅读全文