Question

我想知道是否有人可以帮我一把 - 我会有一些时事通讯图片，当用户将鼠标悬停在他们身上时，我希望说明文字显示在右边。

我已经成功完成了大部分内容使用HTML＆amp; CSS但无法弄清楚如何让它看起来好像文本滑出图像（从图像后面）。此刻它从图像顶部开始。此外，它似乎从左上角开始，我希望它能向右滑动。

我从来没有很好的CSS定位！：（

到目前为止，这是我的代码：

    #container{
    clear: both;

    top: 40px;
}

.image{

    float: left;

}

#container:hover div.text{
    width: 400px;
    position: relative; 
    left:80px;
    top: 10px;
    display: block;

    opacity: 1;
    -webkit-transition: all 0.5s linear;
    -o-transition: all 0.5slinear;
    -ms-transition: all 0.5slinear;
    -moz-transition: all 0.5slinear;
    transition: all 0.5slinear;

}

.text{
        width: 400px;
display: block;
    opacity: 0;
    position: absolute;

    background-color: rgba(0,0,0,0.6);
    color: #f90;
    font-weight: bold;
    line-height: 1.1em;
    -webkit-transition: all 0.5slinear;
    -o-transition: all 0.5slinear;
    -ms-transition: all 0.5slinear;
    -moz-transition: all 0.5slinear;
    transition: all 0.5slinear;


}

    <div id="container">
    <div class="image"><a href="#" target="_blank"><img alt="" src="Newsletter_icon.jpg" height="55px" width="80px"/></a></div>
    <div class="text">This will be some text describing my newsletter...</div>
</div>

<div id="container">
    <div class="image"><a href="#" target="_blank"><img alt="" src="Newsletter_icon.jpg" height="55px" width="80px" /></a></div>
    <div class="text">This will be some text describing my newsletter...</div>
</div>

小提琴：http://jsfiddle.net/Lhtvu/

Answer 1

all 0.5slinear中应该有空格。正确的方法是all 0.5s linear。请看这个小提琴：http://jsfiddle.net/Lhtvu/1/

Answer 2

你犯了两个错误：

一个：all 0.5slinear应为all 0.5s linear。

两个：您需要将默认定位设置为div.text以使其滑动，如下所示：left:0px;。

请参阅Fiddle

Answer 3

让它的工作几乎完全像我想要的那样。还要感谢以下答案。更新小提琴：jsfiddle.net/Lhtvu/4

Answer 4

在这里，之前有人问过。看看这个小提琴并重新构建你的CSS和HTML代码。

它完美无缺。

<强> HTML

<div id="contain">
  <div class="fake-image"></div>
  <div class="text">some text</div>
</div>

CSS

#contain{
  clear: both;
}

.fake-image{
    width: 100px;
    height: 100px;
    background-color: aqua;
    float: left;
    margin-right: 14px;
    cursor: pointer;
}

#contain:hover div.text{
     display: block;
}

.text{
    background-color: yellow;
    float: left; 
    display: none;    
}

DEMO

将鼠标悬停在图片文字上滑出

4 个答案: