Question

我正在尝试最终进行覆盖图像鼠标悬停，而不是创建加倍的图像的双倍，我为所有9个图像都有一个蒙版叠加图像。

我将使用“visibility :(隐藏或可见）”来显示鼠标悬停时的图像。

我遇到的问题是，在将“锁定”图像调整到原始图像的顶部之后，它仍然会影响我的间距，就好像它从未移动过一样。

示例：http://www.pixology.net/ciy/

代码：

<div id="main">&nbsp;<br /><br />
<table width="700" height="700" border="0" align="center" cellpadding="10" cellspacing="2">
  <tr>
    <td><img src="images/main1.png" alt="One" width="214" height="214" /><img src="images/lock.png" alt="lock" class="lockon"/></td>
    <td><img src="images/main2.png" alt="Two" width="214" height="214" /><img src="images/lock.png" alt="lock" class="lockon"/></td>
    <td><img src="images/main3.png" alt="Three" width="214" height="214" /></td>
  </tr>
  <tr>
    <td><img src="images/main4.png" alt="Four" width="214" height="214" /></td>
    <td><img src="images/main5.png" alt="Five" width="214" height="214" /></td>
    <td><img src="images/main6.png" alt="Six" width="214" height="214" /></td>
  </tr>
  <tr>
    <td><img src="images/main7.png" alt="Seven" width="214" height="214" /></td>
    <td><img src="images/main8.png" alt="Eight" width="214" height="214" /></td>
    <td><img src="images/main9.png" alt="Nine" width="214" height="214" /></td>
  </tr>
</table>

</div>

CSS：

#main {
    height:800px;
    width:800px;
    margin: 0px auto;
    background-color:#CCCCCC;
    }

#main .lockon {
    position:relative; 
    top:-214px; 
    visibility:visible;
    }
#main .lockoff {
    position:relative; 
    top:-214px; 
    visibility:hidden;
    }

Answer 1

我遇到的问题是之后的问题 “锁定”图像被调整为打开原始图像的顶部，它仍然是影响我的间距就好像它一样从未动过。

这实质上就是位置相对的运作方式 - 它保留了“流动”中的空间。如果您不希望保留空间使用绝对定位 - 或者不使用顶部使用负margin-top。最重要的是，使用display: hidden只是隐藏了元素 - 而不是它占用的空间，而display: none将使它成为一样，就像布局一样，元素根本不在DOM中。

为了使绝对定位原点附加到contianer元素，您需要在这种情况下制作容器position: relative，容器是您的td。但我不确定如何解决这个问题，因此您可能希望将两个图像放在div内的td内。但如果您这样做，我只会将样式应用于div istelf，并使用类/ ID组合在div上制作图像背景图像以进行切换。

CSS相对定位问题，调整后的叠加仍然占据原始图像位置 - CSS

1 个答案: