0

假设您将鼠标悬停在一个按钮上，然后会弹出另一个 div，并且其背景将变为更大的尺寸。

我尝试过使用 CSS 转换来做到这一点，但问题是我希望当鼠标没有悬停在按钮上时效果立即停止。相反，在 div 缩放到更大的尺寸后，它会调整到原来的更小的尺寸，然后消失。我使用了可见性属性来隐藏和显示 div。

决定转而使用 jquery，我已经尝试使用 animate() 来调整 div 的背景图像的大小，但 jquery 显然还不支持。

关于如何达到这种效果的任何建议？

编辑：

这是一个 jsfiddle 示例http://jsfiddle.net/dRF3r/1/

html

<div class="pointer">Hover
<div id="circle_bottom"></div>
<div id="circle_top"></div>
</div>

css

.pointer {
    background: pink;
    width: 50px;
    height: 50px;
    position: relative;
}
#circle_bottom {
    position: absolute;
    top: 80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: green;
    transition:           All 0.5s ease;
                    -webkit-transition: All 0.5s ease;
                    -moz-transition:    All 0.5s ease;
                    -o-transition:      All 0.5s ease;
    visibility: hidden;
}
#circle_top {
    position: absolute;
    top: 90px;
    left: 10px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: orange;
    transition:           All 0.5s ease;
                    -webkit-transition: All 0.5s ease;
                    -moz-transition:    All 0.5s ease;
                    -o-transition:      All 0.5s ease;
    visibility: hidden;

}
.pointer:hover #circle_bottom {
    transform: rotate(0deg) scale(1.1) skew(0deg) translate(0px, -10px);
    -webkit-transform: rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -moz-transform:    rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -ms-transform:     rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -o-transform:      rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    visibility: visible;
}

.pointer:hover #circle_top {
    transform: rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -webkit-transform: rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -moz-transform:    rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -ms-transform:     rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -o-transform:      rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    visibility: visible;
}

请注意圆圈在消失之前如何调整为较小的形状。有没有办法解决这个问题？

这是查看我想要的图像的链接：http: //i41.tinypic.com/2r1zrwm.jpg

我的目标是当指针悬停时，圆圈会出现并变大一点。这个概念是将 div 相互堆叠。

4

4 回答 4

0

如果你想要 jQuery，你可以使用hover事件和animate方法

$('div').hover(function() {
    $(this).animate({
        "border-width": "20px"
    });
}, function() {
    $(this).animate({
        "border-width": "10px"
    });
});

jsFiddle

于 2013-06-28T19:46:11.447 回答
0

我通过使用这个jquery 插件找到了一个解决方案。您也可以在github上查看此内容， 不过感谢您的所有时间。

于 2013-07-01T02:25:51.480 回答
0

我分叉了 Jeevan 的示例并使用了 jQuery Animat e。使用 jQuery animate 将为您解决问题。假设您的按钮有一个 ID，而圆圈有一个类。

$(document).ready(function () {
    $("#button").hover(function () {
        $(".circle").animate({
            height: "+=100",
            width: "+=100"
        }, 5000);
    });
});

小提琴：http: //jsfiddle.net/abrudtkuhl/bZP94/

于 2013-06-28T19:49:36.680 回答
0

这可以通过使用 onHover 伪选择器来实现：

div:hover {}

检查这个小提琴：http: //jsfiddle.net/QWX8B/

更新：

使用 jquery 动画：

http://jsfiddle.net/skGSF/1/
于 2013-06-28T19:37:05.057 回答