Question

我一直在尝试制作一个水平显示3张图片的表格，这些图片会在rollover.hover上单独更改。但是这些图像在垂直方向上相互影响。

如果你能提供帮助那就太好了。

<table style="width: 678px; height: 380px; cellpadding: 0; cellspacing: 1 "> 
<tbody> 
<tr align="center"> <td style="width: 220px; height: 380px;"> 
<style type="text/css"> #first-div.rollover a {
    display: block;
    width: 225px;
    height: 380px;
    background-image: url(IMG1a);
}
#first-div.rollover a:hover {
    background-image: url(IMG1b);
}
</style><div class="rollover"> </a> </td><td style="width: 220px; height: 380px;"> <style type="text/css"> #second-div.rollover a {
    display: block;
    width: 225px;
    height: 380px;
    background-image: url(IMG2a);
}
#second-div.rollover a:hover {
    background-image: url(IMG2b);
}
</style><div class="rollover"></a> <td style="width: 220px; height: 380px;"> <style type="text/css"> #third-div.rollover a {
    display: block;
    width: 225px;
    height: 380px;
    background-image: url(IMG3a);
}
#third-div.rollover a:hover {
    background-image: url(IMG3b);
}
</style>
<div class="rollover"></a>
</td>
</tr>
</tbody>
</table> 
<div class="rollover" id="first-div"> 
<a href="link1"></a> </div> <div class="rollover" id="second-div"> 
<a href="link2"></a> </div> <div class="rollover" id="third-div"> 
<a href="link3"></a> 
</div>

Answer 1

将CSS分成不同的文件是一种很好的做法。如果你必须使用内联CSS（你真的没有），请确保将它们全部放在<head>标记内的一个地方。

您的标记中存在很多错误（下面列出了一些错误）。我已经清理了你的代码并在这个JSFiddle中为你提供了一个工作示例：http://jsfiddle.net/V3x6w/

您正在关闭从未在行上打开过的标记（</a>） 13,22,32。
表格中有多个<style>个标签
带有背景图片的<div>标签不在表格内。
Cellspacing和cellpadding不是css属性，而是HTML属性 - 使用它们如下：<table cellspacing="0" cellpadding="0"

表内的滚动保持垂直

1 个答案: