CSS代码 鼠标移动到图片上，变成另一张图片，帮忙看下代码问题
<html><head><title>index_05_01</title><metahttp-equiv="Content-Type"content="text/htm...
<html>
<head>
<title>index_05_01</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<style>
.pp td a{
width:200px;
height:292px;
background:url(images/index_05_01_01.jpg);/*图片地址*/
display:block;
}
.pp td a:hover{
width:200px;
height:292px;
background:url(images/index_05_01_03.jpg);/*替换的图片地址*/
display:block;
}
</style>
</head>
<div class="pp">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index_05_01.jpg) -->
<table id="__01" width="1001" height="292" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_05_01_01.jpg" width="250" height="292" alt=""></td>
<td>
<img src="images/index_05_01_02.jpg" width="251" height="292" alt=""></td>
<td>
<img src="images/index_05_01_03.jpg" width="250" height="292" alt=""></td>
<td>
<img src="images/index_05_01_04.jpg" width="250" height="292" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</div>
</html>
我想先试试看，鼠标放到第一张图片上，变成第三张图片 但是没用。求解决 展开
<head>
<title>index_05_01</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<style>
.pp td a{
width:200px;
height:292px;
background:url(images/index_05_01_01.jpg);/*图片地址*/
display:block;
}
.pp td a:hover{
width:200px;
height:292px;
background:url(images/index_05_01_03.jpg);/*替换的图片地址*/
display:block;
}
</style>
</head>
<div class="pp">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index_05_01.jpg) -->
<table id="__01" width="1001" height="292" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_05_01_01.jpg" width="250" height="292" alt=""></td>
<td>
<img src="images/index_05_01_02.jpg" width="251" height="292" alt=""></td>
<td>
<img src="images/index_05_01_03.jpg" width="250" height="292" alt=""></td>
<td>
<img src="images/index_05_01_04.jpg" width="250" height="292" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</div>
</html>
我想先试试看，鼠标放到第一张图片上，变成第三张图片 但是没用。求解决 展开
2个回答
展开全部
很简单，你虽然写了2个样式，但你的表格本身没有调用.pp的样式，还有<td></td>里面必须含有<a></a>标签，因为样式中已经定义了，为防止图片重复，可以去除<img>标签，改成文字即可。如果要每个单元格模块不同背景的话，可以再定义几个背景图片样式，然后给td调用。
所有代码如下，已帮你修改测试成功：
<html>
<head>
<title>index_05_01</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<style>
.pp td a{
width:200px;
height:292px;
background:url(images/index_05_01_01.jpg);/*图片地址*/
display:block;
}
.pp td a:hover{
width:200px;
height:292px;
background:url(images/index_05_01_03.jpg);/*替换图片地址*/
display:block;
}
</style>
</head>
<div class="pp">
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index_05_01.jpg) -->
<table id="__01" width="1001" height="292" border="0" cellpadding="0" cellspacing="0" class="pp">
<tr>
<td>
<a>第1张图片</a></td>
<td>
<a>第2张图片</a></td>
<td>
<a>第3张图片</a></td>
<td>
<a>第4张图片</a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</div>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
