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 に答える