Question

HTML

<div class="team_hover">
    <div style="color:#fff;text-align:center;width:200;">
        <p style="margin:5px 0 0 0;font-size:11px;">Admin</p>
        <p style="margin:0;">Marketing</p>
    </div>
</div>
<div class="hover-div">
    <div class="div_mark">
        <div style="color:#fff;text-align:center;">
            <p style="margin:5px 0 0 0;font-size:11px;">Admin</p>
            <p style="margin:0;">Marketing</p>
        </div>
        <div class="team_back">             
            <p>Team 1</p>
            <p>Team 2</p>
            <p style="border-bottom: 1px solid #ff9900;">Team 3</p>
            <p>Add New Team</p>
        </div>
    </div>
</div>

CSS

.team_hover{
    background:#ffcc00;
    position:absolute;
    z-index:1;
}
.div_mark{
    background:#ffcc00;
    position:absolute;
    z-index:1;
}

.hover-div{
    display:none;
    transition:all 0.9s linear 0s;
 }
 .team_hover:hover + .hover-div {
    display:block;
 }
 .hover-div:hover {
    display:block;
 }

这里我可以在悬停时显示隐藏的div。我想在悬停时向下滑动第二个div。

如果没有jQuery，你怎么做？

JSFIDDLE

Answer 1

要制作下滑效果，您可以使用div的位置，如下所示：

var str = '{"id":"60653","key":"project1","self":"http://127.0.0.1:321/rest/api/2/issue/project1"}'
var mydatas= JSON.parse(str);

这是您的fiddle已更新

如何在悬停时提供向下滑动效果？

1 个答案: