Question

当我将鼠标悬停在我的div（#hotspot）上时，色带（.rtc和.rbc）会改变它们的比例和位置，但是主色带（.rtc：after和.rtc：before，.rbc：after和.rbc）：之前）只是消失并再次出现，为什么它们只是消失并且在效果激活时出现为什么当.rtc和.rbc类改变他们的时候他们不会同时改变他们的大小？有没有解决方案/解决方案。请回答！

function hsmouseenter() {
    $("#hotspot, #center").css({
        'width': '60%',
        'height': '90%',
        'top': '5%',
        'left': '20%'
    });
    $("#center").css({
        'box-shadow': '0 0 2vw white'
    });
    $(".rt, .rtc").stop(true, false).animate({
        width: '66%',
        height: '13%',
        top: '10%',
        left: '17%',
        opacity: 0
    }, 300);
    $(".rb, .rbc").stop(true, false).animate({
        width: '66%',
        height: '13%',
        bottom: '10%',
        left: '17%',
        opacity: 0
    }, 300)
}

function hsmouseleave() {
    $("#hotspot, #center").css({
        'width': '50%',
        'height': '80%',
        'top': '10%',
        'left': '25%'
    });
    $("#center").css({
        'box-shadow': '0 0 1vw white'
    });
    $(".rt, .rtc").stop(true, false).animate({
        width: '56%',
        height: '8%',
        top: '15%',
        left: '22%',
        opacity: 1
    }, 400)
    $(".rb, .rbc").stop(true, false).animate({
        width: '56%',
        height: '8%',
        bottom: '15%',
        left: '22%',
        opacity: 1
    }, 400)
}

这是JSFiddle： http://jsfiddle.net/Ultraga/3m2UA/1/

Answer 1

它有点不可能，虽然FF可以根据这篇帖子评论处理它：Animating css's after and before selectors in jQuery

我想，你可以使用css过渡来做到这一点。当您无法使用悬停时您可以添加一些类（f.e. .hover）

在您的示例中已更改

overflow:visible !important;

和不透明度为1使您看到动画后显示伪元素。 http://jsfiddle.net/3SHFJ/

为什么：之后和：之前没有在悬停时调整大小？

1 个答案: