第1步

Question

目前我在div中有一个表，该表有2行，顶行有3列，底行有2列。我使用表的原因是因为我不知道如何在这种安排中设置div。

我需要做的是尽可能使用CSS3动画，让每个单元格中的图像淡出，新图像在悬停时淡入，但也保持不变。我已经做到了这一点，但是如果用户将鼠标悬停在桌子上的一个单元格中的另一个图像上，我希望图像更改回原始图像。

有人可以告诉我该怎么做吗？我的代码也在下面。

HTML ：

<div id="table">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td bgcolor="#b15ce2"><img src="transparentimage1.jpg" width="390" height="390" /></td>
  <td bgcolor="#70f940"><img src="transparentimage2.jpg" width="390" height="390" />&nbsp;</td>
  <td bgcolor="#4040f9"><img src="transparentimage3.jpg" width="390" height="390" />&nbsp;</td>
</tr>
<tr>
  <td bgcolor="#9933CC"><img src="transparentimage4.jpg" width="390" height="390" />&nbsp;</td>
  <td bgcolor="#33FF99" colspan="2"><img src="transparentimage5.jpg" width="390" height="390" />      </td>
</tr>

css ：

#table {    
   position: absolute;
   width: 90%;
   height: 700px;
   left: 5%;
   background-color: #FFFFFF;
   border-radius: 20px;
   border: 8px solid #666666;
}

Answer 1

你不应该使用表格，它们已经过时了。查看使用浮动并使用“内联块”显示div。

使用CSS

可以从一个图像淡入另一个图像

创建一个具有唯一类/ id的div：

<div class="image"></div>

在CSS中定位div并添加背景图像（您需要为此示例添加定位和大小，我已为此示例跳过）。对于淡入淡出效果，您需要在transition属性中添加并设置过渡样式（即缓出，线性等）和时间（0.5s = 0.5秒）。

.image{background: url(../img/photo.jpg); -webkit-transition: ease-out 0.5s; transition: ease-out 0.5s;}

然后在悬停时为div添加不同的背景图像

.image:hover{background: url(../img/hoverphoto.jpg)}

这是一个简单的解决方案，用于更深入的动画查看CSS关键帧动画和jQuery onhover动画

Answer 2

以下是如何执行此操作的基本示例！

第1步

为图像添加类，以指定哪些图像应该立即显现，哪一个应该在悬停时出现。我将使用“img1”和“img2” - img1最初可见。

HTML：

<div class="hover-img">
    <img src="kjdflkjsdf.jpg" class="img1"/>
    <img src="lkgflsjgkl.jpg" class="img2"/>
</div>

第2步

将图像设置为绝对样式 - 这允许它们彼此叠加，这是我们想要的，因为我们希望它们都出现在同一位置。为了使绝对元素适当呈现，其父级必须具有relative，absolute或fixed定位。我们将使用relative。

CSS：

.hover-img {
    position: relative;
    width: 500px; height: 500px;
}
.hover-img > img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; /* Assuming that both images have the same dimensions - in thise case, 500x500 */
}

第3步

设置第二个图像的样式，使其通常完全透明（不透明度：0），并在鼠标悬停时变为完全不透明：

CSS：

.hover-img > .img2 {
    opacity: 0;
}
.hover-img:hover > .img2 {
    opacity: 1;
}

第4步

导致opacity属性转换而不是立即更改：

CSS：

.hover-img > .img2 {
    opacity: 0; /* This comes from step 3 */
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -ms-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

你有它！

（工作小提琴：http://jsfiddle.net/4p6Lk/）

Answer 3

与Alan Sutherland一样，但有完整的浏览器特定转换声明列表......

#table td {
background: url('/path/to/some/image.png');
        transition: 0.25s;
     -o-transition: 0.25s;
    -ms-transition: 0.25s;
   -moz-transition: 0.25s;
-webkit-transition: 0.25s;
}
#table td:hover {
    background: url('/path/to/some/different-image.png');
}

这将影响元素中具有id表的每个表格单元格。您真正需要做的就是为您想要的任何单元格设置bg图像，然后使用：hover psuedo-class设置新的BG图像。

http://www.css3.info/preview/css3-transitions/，具体而言http://davidwalsh.name/background-animation-css（对于背景）可能会帮助您更多。

CSS3动画淡出图像并淡入另一个图像

3 个答案:

第1步

第2步

第3步

第4步