使用 :hover 伪类更改样式时，Chrome 不尊重溢出隐藏答案

【问题标题】：Chrome doesn't respect overflow hidden when changing style with :hover pseudo class使用 :hover 伪类更改样式时，Chrome 不尊重溢出隐藏
【发布时间】：2013-05-22 13:12:17
【问题描述】：

我有一个圆形 div (border-radius: 50%)，其中包含另外两个转换为表示圆形段的 div，我通过在父容器（外圈）处设置 overflow: hidden 得到：

我希望圆段在鼠标悬停时更改其背景颜色，这在 Firefox 和 IE 中运行良好，但 Chrome 似乎不尊重悬停时父容器的 overflow: hidden 设置。

jsFiddle：http://jsfiddle.net/rFrcu/

有什么想法吗？

【问题讨论】：

哇！似乎是一个 google-chrome 错误。我对此一无所知，但在 IE 和 FF 上工作，而不是在 Chrome 上工作真的很奇怪。你已经尝试了什么？我必须补充一点，IE 也不能正常工作。红色段叠加在黄色段上。
我尝试了绝对/相对定位、显示选项（块、内联块）和 z 索引的不同组合，但它们都不起作用。你用的是哪个版本的IE？ IE 10 适合我。
我在工作中使用 IE 9。如果我有时间并且还没有解决，我会看看你的例子，并在我回家时尝试得到一些东西......

标签： css google-chrome html css-transforms

【解决方案1】：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='ru' xml:lang='ru'>
<head>
<title>circle</title>
<style type="text/css">
<!--
.node {
    position: relative;
    width: 180px;
    height: 180px;
    background: blue;
    opacity: 0.9;
    border-radius: 50%;
}
.button {
    position: absolute;
    height: 50%;
    width: 50%;
    left: 50%;
    top: 50%;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
    display: block;
    line-height: 0px;
    overflow: hidden;
}
.button1 {
    -webkit-transform:rotate(0deg) skew(30deg);
    -moz-transform: rotate(0deg) skew(30deg);
    -ms-transform: rotate(0deg) skew(30deg);
    -o-transform: rotate(0deg) skew(30deg);
    transform: rotate(0deg) skew(30deg);
}
.button2 {
    -webkit-transform:rotate(90deg) skew(60deg);
    -moz-transform: rotate(90deg) skew(60deg);
    -ms-transform: rotate(90deg) skew(60deg);
    -o-transform: rotate(90deg) skew(60deg);
    transform: rotate(90deg) skew(60deg);
}
.circ {
    height: 200%;
    width: 200%;
    border-radius:100%;
    left: -100%;
    top: -100%;
    position: absolute;
}
.button1 .circ {
    background-color: red;
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    -o-transform: skew(-30deg);
    transform: skew(-30deg);
}
.button2 .circ {
    background-color: yellow;
    -webkit-transform: skew(-60deg);
    -moz-transform: skew(-60deg);
    -ms-transform: skew(-60deg);
    -o-transform: skew(-60deg);
    transform: skew(-60deg);
}
.circ:hover {
    background-color: green;
}
-->
</style>
</head>
<body>
<div class="node">
  <div class="button button1">
    <div class="circ"></div>
  </div>
  <div class="button button2">
    <div class="circ"></div>
  </div>
</div>
</body>
</html>

【讨论】：

【解决方案2】：

    <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='ru' xml:lang='ru'>
<head>
<title>circle</title>
<style type="text/css">
<!--
.node {
    position: relative;
    width: 180px;
    height: 180px;
    background: blue;
    opacity: 0.9;
    border-radius: 50%;
}
.button {
    position: absolute;
    height: 50%;
    width: 50%;
    left: 50%;
    top: 50%;
    border-radius:0 0 100% 0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform-origin-x: 0px;
    -webkit-transform-origin-y: 0px;
}
.button.button1 {
    background-color: red;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
}
.button.button2 {
    background-color: yellow;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}
.button.end {
    background-color: blue;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.button:hover {
    background-color: green;
}
.button.end:hover {
    background-color: blue;
}
-->
</style>
</head>
<body>
<div class="node">
  <div class="button button1"></div>
  <div class="button button2"></div>
  <div class="button end"></div>
</div>
</body>
</html>

【讨论】：

使overflow: hidden 过时的有趣方法。我分叉了 jsFiddle 以反映您的解决方案：http://jsfiddle.net/bjv2t/。我想念的是一种无需重叠即可控制线段宽度的方法，这使得用线段动态填充圆圈变得困难。