javascript - 在旋转滑块上悬停时弹出文本框

Question

我正在使用 wordpress 网站上的旋转滑块构建一个具有 3d 正面和背面骨架图像的网站。

当您将鼠标悬停在特定区域上或指向一个文本框时，我想做到这一点，其中会弹出一个文本框。我不确定如何使用旋转滑块来实现。

Answer 1

我想你想要这样的东西 - 需要一点 jquery

$("#container > article:gt(0)").hide();

setInterval(function () {
    $('#container > article:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#container');
}, 3000);

body {
    font: normal 16px/1.5 Arial, sans-serif;
}

h1, p {
    margin: 0;
    padding: 0 0 .5em;
}

#container {
    margin:0 auto;
    max-width: 480px;
    max-height:240px;
   overflow:hidden;
}



/*
 * Caption component
 */
.caption {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    color: white;

    -webkit-transform: translateY(100%);
            transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY( -webkit-calc(-100% - 10px) );
            transform: translateY( calc(-100% - 10px) );

    transition: -webkit-transform .35s ease-out;
    transition:         transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

article{max-width:480px; max-height:240px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="container">

    <article class="caption">
        <img class="caption__media" src="http://farm7.staticflickr.com/6088/6128773012_bd09c0bb4e_z_d.jpg" />
        <div class="caption__overlay">
            <h1 class="caption__overlay__title">Alaska</h1>
            <p class="caption__overlay__content">
                Alaska is a U.S. state situated in the northwest extremity of the North American continent. Bordering the state is Canada to the east, the Arctic Ocean to the north, and the Pacific Ocean to the west and south, with Russia (specifically, Siberia) further west across the Bering Strait.
            </p>
        </div>
    </article>

        <article class="caption">
        <img class="caption__media" src="http://www.planetware.com/photos-large/USMI/michigan-ann-arbor-university.jpg" />
        <div class="caption__overlay">
            <h1 class="caption__overlay__title">Michigan</h1>
            <p class="caption__overlay__content">
               Some dummy text for testing
            </p>
        </div>
    </article>

    </div>
  

</div>

Answer 2

我真的很抱歉我不会回答你的确切问题，但我相信我仍然会有所帮助。

我在我的大多数 Wordpress 网站中都使用了这个确切的功能，并且每次我使用一个名为 text-hover 的免费 Wordpress 插件来执行此操作。https://wordpress.org/plugins/text-hover/

它就像一个魅力！我希望我有帮助！