Question

我有以下 HTML

<table style="position:relative; left: 10px; top:5px;">
            <tr id="all_extended">
                <td id="pucenas">
                    <img id="cenas"></img>
                </td>
                <td id="slide">
                    <div id="slider">
                    </div>
                </td>
            </tr>
</table>

AND CSS

#slide{
  height:100%;
  border: none;
  padding-left:20px;
  display:none;
}

#slider{
  border: none;
  padding-left:30px;
  background-color:green;
  position:relative;
  height:100%;
  opacity:0;
  width:0px;
  overflow:hidden;

  transition: width 10s linear 2s;
  /* safari is webkit */
  -webkit-transition:width 1s linear 2s;
    transition: opacity 10s linear 2s;
  /* safari is webkit */
  -webkit-transition:opacity 1s linear 2s;
}

#cenas{
    width:99%;
    height:100%;
    border: solid black 1px;
    position:relative;
    left: 0%;
}

#pucenas{
  font-size: 0;
  width:100px;
  height:100px;
  position:relative;
  border: solid black 1px;
  margin: 0px;
  padding: 0px;
  cursor:pointer;
}

#all_extended:hover #slide{
    width: 200px;
    display:inline;
}

当我们悬停黑色方块时，我想要的是显示绿色标签，就像这张图片显示http://awwapp.com/s/99/5e/21.png一样（它应该是动画的并且带有纯css ）。关于这个的任何想法？

Answer 1

以下是我提供的内容：

http://jsfiddle.net/U7A95/1/

HTML

<div id="all_extended">
    <div id="pucenas">
        <img id="cenas" src="http://lorempixel.com/80/80/"></img>
    </div>
    <div id="slide">
    </div>
</div>

CSS

#slide{
    display:inline-block;

    margin-left:30px;
    background-color:green;
    width:0px;
    opacity:0;

    overflow:hidden;
    position:absolute;
    bottom:0;
    top:0;

    transition: all 1s linear 1s;
    -webkit-transition: all 1s linear 1s;
}

#all_extended:hover #slide{
    width: 200px;
    opacity: 1;
}

#pucenas{
    display:inline-block;
}
#all_extended{
    position:relative;
}

要转换多个属性，请使用all，如果您只是在单独的规则中列出width和opacity，则最后覆盖前一个属性，因此只有一个转换。为了获得正确的高度，我将顶部和底部设置为0，因此它紧贴在包装器的顶部和底部。

Answer 2

这就是我使用动画.slider的宽度和渐变来实现它的方法。

以下是html：

<div class="parent">
    <div class="slider">
        <span>Some content about this image</span>
    </div>
</div>

css：

.parent {
    position: relative;
    width: 200px;
    height: 200px;
    background-image: url("http://fc01.deviantart.net/fs71/i/2011/237/8/a/fox_yawn_by_krankeloon-d47t1ut.jpg");
    background-position: center;
    background-size: cover;
}

.slider {
    position: absolute;
    left: 110%;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0));
    background: -moz-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0));
    background: -ms-linear-gradient(left, rgba(9, 146, 26, 1), rgba(9, 146, 26, 0));
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    overflow: hidden;
    width: 0;
    text-wrap: none;
}

.parent:hover .slider {
    background: rgba(9, 146, 26, 1);
    width: 100%;
}

最后，这是一个小提琴：Demo

悬停时使用纯css动画绿色标签

2 个答案: