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

Question

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

当你将鼠标悬停在特定区域或指向弹出文本框的位置时，我想将其设为。我不确定使用旋转滑块是怎么可能的。

Answer 1

我很抱歉我没有回答你的确切问题，但我确实相信我仍会提供帮助。

我在大多数Wordpress网站上都使用过这个功能，每次我都使用一个名为text-hover的免费Wordpress插件。 https://wordpress.org/plugins/text-hover/

它就像一个魅力！我希望我能提供帮助！

Answer 2

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

＆＃13;

＆＃13;

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

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

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;