Question

我有一个圆div（border-radius: 50%），其中包含两个转换为代表圆弧段的div，我可以通过在父容器（外圆）处设置overflow: hidden来获得：

enter image description here 我希望圆圈段在鼠标悬停时更改背景颜色，这在Firefox和IE中工作正常，但Chrome似乎不尊重悬停时父容器的overflow: hidden设置。

After hover in chrome

有什么想法吗？

Answer 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%;
    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>

Answer 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%;
    -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>

使用以下命令更改样式时，Chrome不会忽略隐藏溢出：hover伪类

2 个答案: