3

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

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

在 chrome 中悬停后

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

有任何想法吗？

4

2 回答 2

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>
于 2013-05-27T19:04:16.913 回答
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>
于 2013-05-28T18:09:42.140 回答