Chrome瀏覽器不尊重溢出隱藏時更改樣式：hover僞類

我有一個圓形div（border-radius: 50%）包含兩個更多div轉換爲表示圓形段，我通過設置overflow: hidden在父容器（外圈）：Chrome瀏覽器不尊重溢出隱藏時更改樣式：hover僞類

enter image description here 我想圓段有其背景顏色鼠標懸停改變，這在Firefox和IE的罰款，但Chrome瀏覽器似乎不尊重overflow: hidden設置上懸停父容器中。

After hover in chrome

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

任何想法？

來源

2013-05-27 ngu

哇！看起來像一個谷歌鉻的錯誤。我對此一無所知，但真的很奇怪，適用於IE和FF，而不適用於Chrome。你已經試過了什麼？我必須補充說，在IE瀏覽器上工作不正常。紅色部分疊加在黃色部分上。 – DaGLiMiOuX

我嘗試了絕對/相對定位，顯示選項（塊，內聯塊）和z-索引的不同組合，他們都沒有工作。您使用的是哪個版本的IE？ IE 10適合我。 – ngu

我在工作中使用IE 9。我會看看你的例子，當我回家時嘗試獲得某些東西，如果我有時間並且它還沒有解決...... – DaGLiMiOuX

<!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-28 18:09:42 yatanson

很好的解決方法。謝謝！ – ngu

<!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-27 19:04:16 yatanson

有趣的方法使'overflow：hidden'過時。我分叉jsFiddle以反映你的解決方案：[http://jsfiddle.net/bjv2t/](http://jsfiddle.net/bjv2t/）。我想念的是一種控制段的寬度而不需要重疊它們的方式，這使得動態地用段來填充該圓是困難的。 – ngu

Chrome瀏覽器不尊重溢出隱藏時更改樣式：hover僞類

回答

相關問題