1

我很难找到解决这个问题的方法。我在这里设置了这个小例子。

谷歌浏览器似乎打破了:hover的边界半径，而 Firefox 正确呈现它。解决此问题的正确方法是什么？

position:relative在.bubble中可能是破坏它的东西，如果是这样，是否有任何其他解决方案可以将.info绝对位置 div 嵌套到.bubble所以top:会使用 .bubble 的顶部而不是页面？

HTML：

<div class="bubble">
    <img src="http://oneslidephotography.com/wp-content/uploads/2009/05/Digital-SLR-Photography-All-in-One-For-Dummies-sample-image.jpg" />
    <div class="info">
        <h3>Some Info Text</h3>
    </div>
</div>

CSS：

.bubble {
    position: relative;
    float: left;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}

.info {
    overflow: hidden;
    position: absolute;
    width: inherit;
    -webkit-transition: top 0.2s ease-out;
    -moz-transition: top 0.2s ease-out;
    -o-transition: top 0.2s ease-out;
    -ms-transition: top 0.2s ease-out;
    transition: top 0.2s ease-out;
    top:200px;
}

.bubble:hover .info {
    top:80px;
}

.info h3{
    text-align: center;
    font-family: sans-serif;
}
4

1 回答 1

1

我认为问题在于您的图像占据了整个背景。

我已经对其进行了更改，因此您没有图像（并减小了边框半径）……所以只是基本的边框半径，当然，一切都很好：

<div class="bubble" style='border:solid 1px'>
    <div class="info">
        <h3>Some Info Text</h3>
    </div>
</div>

http://jsfiddle.net/SbR6n/

听起来像一个错误。

于 2013-02-08T21:47:50.723 回答