html - 如何在悬停时在图像过渡中滑动后显示文本

Question

我正在尝试使标题文本和正文文本出现（淡入）在鼠标悬停在图像上后滑入的图像的右侧。

我目前正在使用我找到的这段代码，它给了我想要的图像效果，但我不知道如何在文本中添加。

如果您想查看它的工作原理，这是我找到图像效果的链接：http: //jsfiddle.net/2vLjU/13753/

当您将鼠标悬停在黑色方块上时，它会延伸，并且在右侧下方是我想要文本所在的位置。

任何帮助深表感谢。

谢谢！

**HTML:**

<a href="">
<div class="wrapper">
    <img id="slide" src="http://lorempixel.com/output/cats-q-c-100-100- 4.jpg" />
</div>
</a>

**CSS:**

    .wrapper {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 100px; 
    border: 0px solid black;
}

#slide {
    position: absolute;
    left: -300px;
    width: 400px;
    height: 100px;
    background: black;
    transition: 1s;
}

.wrapper:hover #slide {
    transition: .5s;
    left: 0;
}

标签： htmlcss

Answer 1

HTML

<div class="wrapper">
<div class='slide'></div>
</div>
<div class="wrapper">
<div class='slide'></div>
</div>

CSS

.wrapper {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 100px; 
    border: 0px solid black;
}

.slide {
    position: absolute;
    left: -300px;
    width: 400px;
    height: 100px;
    background: black;
    transition: 1s;
    color: white;
    padding: 20px;
}

.wrapper:hover .slide {
    transition: .5s;
    left: 0;
}

查询

$('.slide').on('mouseenter', function () {
$('.inner_text').remove();
$(this).append("<a class='inner_text'>HELLO THERE</a>")
})

结果

****** * * * * * * 编辑 * * * * * * ********

如果你想让文本在黑框之外，填充非悬停框所在的空间，只需将你的 jQuery 更改为：

$('.slide').eq(0).on('mouseenter', function () {
$('.inner_text').remove();
$(this).parent().parent().append("<a class='inner_text'>HELLO THERE</a>")
$('.inner_text').css('margin-left', '290px')
$('.inner_text').css('margin-top', '-98px')
$('.inner_text').css('position', 'fixed')
})

$('.slide').eq(1).on('mouseenter', function () {
$('.inner_text').remove();
$(this).parent().parent().append("<a class='inner_text'>HELLO THERE</a>")
$('.inner_text').css('margin-left', '290px')
$('.inner_text').css('margin-top', '-120px')
$('.inner_text').css('position', 'fixed')
})

$('.slide').on('mouseleave', function () {
$('.inner_text').remove();
})

结果：

如果文本不在您想要的位置，您可以调整文本的位置。