1

我最初面临这个常见问题......

stackoverflow.com/css-border-radius-not-trimming-image-on-webkit

所以我按照上面问题的小提琴解决了这个问题。

但是后来我想在悬停时在这个标记内设置一个 div 动画，所以我添加了这个 css 和 jquery ......

但是现在当我悬停这个元素时，动画就会发生并且我失去了所有的边界半径！

啊啊啊！为什么会出现这种情况！？？？

看到它在行动中发生http://jsfiddle.net/USd5s/439/


<span class="outer">
    <div class="outer">
        <div class="inner">
        </div>
    </div>
</span>

\

span.outer{
    position:relative;
    width: 100px;
    height: 100px;
    display: block;
    cursor: pointer;
    float: left;
    margin: 15px
}

div.outer {   
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-border-radius: 6px;
}

.inner {
    background:red;
    height:100px;
    width:300px;
    position: relative;
    background: #e6f0a3;
}

\

$("span.outer").hover(function() {
    $(this).find('.inner').animate({
        left: '-200px'
    }, 100, function() {
        // Animation complete.
    });
}, function() {
    $(this).find('.inner').animate({
        left: '0'
    }, 100, function() {
        // Animation complete.
    });
});
4

1 回答 1

2

您忘记为外部 div 添加边框！

div.outer {   
    overflow:hidden;    
    -moz-border-radius: 12px;
    border-radius: 12px;
    -webkit-border-radius: 6px;
    border: white 2px solid;
}

我对吗？

演示：分叉的小提琴

于 2013-01-22T16:15:40.727 回答