Question

选中jsFiddle。

橙色条用作进度条，圆圈下的值是进度条的高度。

知道为什么overflow:hidden;被忽视了，怎么解决这个问题？显然，任何事情都不应该超出这个圈子。

还有更好的解决方案吗？

Answer 1

稍微修改了你的小提琴。 Here is the link

修改：已将.outerContainer css从display:block更改为display:table，并将margin-top:30px添加到p css

检查这是否适合您。

Answer 2

position: absolute和overflow: hidden似乎与display: table/table-cell的效果不佳。删除你在那里的表格来垂直居中文本可以解决问题。至少在Firefox中。

Answer 3

我认为这是浏览器的事情......

这是CSS3版本......

.progressBar {
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ec6730;
    transition: height 1s;
}

.innerContainer:hover > .progressBar {
    height: 300px;
}

http://jsfiddle.net/ZyhgT/2/

它不再闪烁'因为浏览器处理作业（不是js循环动画......）。但它仍然显示动画完成的优势！这可能是浏览器的东西......可能是一个错误......

Answer 4

这与jQuery或任何javascript无关。事实上，如果您删除所有的javascript并使用li：hover上的css操纵.progressBar的高度，那么无论如何你都会注意到这个bug。

它似乎是一个浏览器问题，如：https://code.google.com/p/chromium/issues/detail?id=157218

所述

作为一种解决方法，尝试在mask元素中添加一个不易察觉的css变换：

.outerContainer {
    -webkit-transform: rotate(0.000001deg);
}

Answer 5

您只需要更改.outerContainer课程，它就可以正常使用了！

.outerContainer {
    position: relative;
    display: block;
    height: 96px;
    width: 96px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;

  -webkit-border-radius: 50px;
          border-radius: 50px;
}

Answer 6

将level类放在outerContainer div中，并将level类中的span设置为相对定位。在JavaScript中，要计算级别，除以10而不是100以获得完美的圆形悬停效果。

这是fiddle。

<强> HTML

<div class="outerContainer">
    <div class="innerContainer">
        <p>Circle 3</p>
        <span class="progressBar"></span>
    </div>
    <div class="level"><span>75</span>
    </div>
</div>

<强> CSS

body {
    background: blue;
}

#circles {
    text-align: center;
    margin: 100px 0;
}

li {
    display: inline-block;
    margin: 0 10px;
    position: relative;
}

.outerContainer {
    position: relative;
    display: block;
    height: 96px;
    width: 96px;
    overflow: hidden;
    background: #fff;
    border: 2px solid #fff;

    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

p {
    color: #000;
    width: 96px;
    position: relative;
    z-index: 2;
}

.progressBar {
    display: block;
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #ec6730;
}

.level span{
    position:relative;
}

<强> JS

$(function() {
    $("#circles li").hover(function(){
        var thisElement = $(this);
        var level = $(this).find(".level").text();
        var elementHeight = $(this).find(".outerContainer").height();       
        level = (level/10)*elementHeight;

        $(thisElement).find(".progressBar").stop().animate({
            height: level
        }, 300);
    }, function() {
        var thisElement = $(this);

        $(".progressBar").stop().animate({
            height: 0
        }, 300);
    });
});

Answer 7

display: table对CSS定位效果不佳;

你应该避免使用它，并找到一些其他方法来垂直居中你的标签。

如果您的圈子具有已知高度，例如您的代码似乎表示（height:96px ecc），那么只需使用固定的顶部位置absolute定位<p>元素：< / p>

http://jsfiddle.net/ZyhgT/5/

请注意，您甚至不需要jQuery，只需使用CSS3即可实现（除非您的目标是旧浏览器）

border-radius + overflow：在使用jQuery动画时隐藏

7 个答案: