8

检查这个jsFiddle。

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

任何想法为什么overflow:hidden;被忽视以及如何解决这个问题？显然，任何东西都不应该超出这个圈子。

还有更好的解决方案吗？

4

7 回答 7

1

稍微修改了你的小提琴。链接在这里

修改：将.outerContainercss 更改为display:blockfromdisplay:table并添加margin-top:30px到pcss

检查这是否适合您。

于 2013-10-25T10:25:10.663 回答
0

这与 jQuery 或任何 javascript 无关。实际上，如果您删除所有 javascript 并使用 li:hover 上的 css 操作 .progressBar 的高度，无论如何您都会注意到该错误。

据报道，这似乎是浏览器问题：https ://code.google.com/p/chromium/issues/detail?id=157218

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

.outerContainer {
    -webkit-transform: rotate(0.000001deg);
}
于 2013-08-06T13:15:50.933 回答
0

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

这是一个小提琴。

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);
    });
});
于 2013-09-09T05:13:19.203 回答
0

您只需要更改您的.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;
}
于 2013-08-17T20:34:23.890 回答
0

position: absolute并且overflow: hidden似乎与display: table/table-cell. 删除您在其中的表格内容以垂直居中文本可以解决问题。至少在 Firefox 中。

于 2013-06-10T20:29:15.440 回答
0

我觉得是浏览器的问题...

这是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 循环动画......）。但它仍然显示了动画完成的优势！！！这可能是浏览器的问题......可能是一个错误......

于 2013-06-10T20:34:58.700 回答
0

display: table在 CSS 定位方面效果不佳；

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

如果你的圆圈有一个已知的高度，就像你的代码似乎表明（height:96pxecc），那么只需使用一个固定的顶部位置来absolute定位<p>元素：

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

请注意，您甚至不需要 jQuery，这一切都可以通过 CSS3 实现（除非您的目标是旧浏览器）

于 2013-09-09T12:02:50.620 回答