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

Question

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

我想在您将鼠标悬停在特定区域上或指向一个包含文本的文本框时弹出。我不确定如何使用旋转滑块实现这一点。

Answer 1

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

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

它就像一个魅力！希望对您有所帮助！

Answer 2

我想你想要这样的东西 - 需要一点 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>

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

Pop up text boxes on hover on revolution slider

html

javascript

css

wordpress

revolution-slider