如何滑动在图像上切换文本

How to slideToggle text over an image?

本文关键字：文本 图像 何滑动      更新时间：2023-09-26

我写了这段代码，它有效。基本上，当用户将鼠标悬停在图像上时，图像上会显示文本。

这是一个画廊，所以我需要使用$(this).children才能显示正确的元素。

我不明白的是，我无法使h2 .nom_realisation幻灯片嘟嘟嘟囔囔。我尝试了几件事都没有成功。我相信这很简单.如果有人能指出我正确的方向？

演示 ： http://jsfiddle.net/Vinyl/725hcc62/1/

法典：

.CSS 

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

.HTML

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
             <h2 class="nom_realisation">Lorem ipsum</h2>
        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

JavaScript/jQuery

(function ($) {
    $(document).ready(function () {

        $(".container_img").hover(function () {
            $(this).children('.container_nom_realisation').show('slow');
            $(this).children('.text').slideToggle('slow');
        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");
        });
    });
})(jQuery);
  • .nom_realisation不是.container_img的孩子，所以你需要.find()而不是孩子。
  • 您将无法对table-cell元素进行动画滑动。要么不要以这种方式显示它，要么（因为我假设你使用table-cell作为垂直中心，让另一个元素充当表格单元格来包装你的<h2>：

.HTML 

<div class="container_img">
    <div class="container_nom_realisation hide">
        <div class="text">
            <div class='table-cell'>
                 <h2 class="nom_realisation">Lorem ipsum</h2>
            </div>
        </div>
    </div>
    <img class="image_test" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>

.CSS

.hide {
    display : none;
}
.text {
    z-index:100;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    text-align: center;
    display: table;
    background: rgb(134, 0, 0);
    /* Fall-back for browsers that don't support rgba */
    background: rgba(134, 0, 0, .7);
}
.table-cell {
    vertical-align: middle;
    display: table-cell;
}
h2.nom_realisation {
    color: #ffffff !important;
    font-family:'Oswald', sans-serif;
    font-size: 30px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    text-decoration: none !important;
    margin: 0;
    padding: 0;
    width: 100%;
}
h2.nom_realisation a, h2.nom_realisation a:hover {
    color: #ffffff !important;
    text-decoration: none;
}
.container_img img {
    position:absolute;
    left:0;
    top:0;
}
.container_img {
    height:232px;
    width:232px;
    position:relative;
}
.image_test {
    width:232px;
    height: auto;
}

JavaScript

(function ($) {
    $(document).ready(function () {
        $(".container_img").hover(function () {
            $(this).children('.container_nom_realisation').show('slow');
            $(this).find('.nom_realisation').slideToggle('slow');
        }, function () {
            $(this).children("img").fadeTo(200, 1)
                .end().children(".text").hide();
            $(this).children('.container_nom_realisation').hide('slow');
            //.end().children(".hover").slideToggle("slow");
        });
    });
})(jQuery);

JSFiddle

我不知道

这是否是你想要的，但如果这是我的想法，你可以用纯 CSS 来做到这一点......

<div class="container-img">
    <div class="image-title">LOREM IPSUM</div>
    <img class="image" src="https://www.google.fr/images/srpr/logo11w.png" />
</div>
.container-img{
    position: relative;
    background: #cccccc;
    width: 230px;
    overflow: hidden;
}
.container-img .image-title{
    position: absolute;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    margin: 0 auto;
    padding: 200px 0 0 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    color: #ffffff;
    text-align: center;
    -webkit-transition: all 0.35s;
    transition: all 0.35s;
    z-index: 10;
}
.container-img:hover .image-title{
    opacity: 1;
    padding: 35px 0 0 0;
}
.container-img .image{
    position: relative;
    max-width: 100%;
    z-index: 0;
}

这是一个小提琴：http://jsfiddle.net/rk16vhwe/

我认为你不能在ccs类名中有一个下划线：nom_realisation尝试在任何地方重命名它：例如命名实现

哪些字符在 CSS 类名/选择器中有效？

只是去掉： 

$(this).children

另外，您调用$（this）的次数太多了！调用一次。然后使用该变量。

var this = $(this);
相关文章：