使用懸停與特殊的CSS形狀

我無法讓:hover與我做的CSS餅片一起工作。我使用透明邊框和border-radius屬性來使我的div看起來像餅圖的1/4。但是，我試圖用於懸停狀態的任何樣式都不起作用。我猜它是與具有height: 0;和width: 0;股利，但我不知道如何解決這個問題？這裏是我的代碼：使用懸停與特殊的CSS形狀

div { 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    margin: 0 auto; 
 
    width: 0; 
 
\t height: 0; 
 
    border-radius: 50%; 
 
} 
 
.circle-1 { 
 
    border-left: 50px solid transparent; 
 
\t border-right: 50px solid transparent; 
 
\t border-bottom: 50px solid transparent; 
 
    border-top: 50px solid green; 
 
} 
 
.circle-1:hover { 
 
    border-top: 50px solid pink; 
 
    cursor: pointer; 
 
} 
 
.circle-2 { 
 
    border-left: 50px solid transparent; 
 
\t border-right: 50px solid red; 
 
\t border-bottom: 50px solid transparent; 
 
    border-top: 50px solid transparent; 
 
} 
 
.circle-3 { 
 
    border-left: 50px solid transparent; 
 
\t border-right: 50px solid transparent; 
 
\t border-bottom: 50px solid blue; 
 
    border-top: 50px solid transparent; 
 
} 
 
.circle-4 { 
 
    border-left: 50px solid orange; 
 
\t border-right: 50px solid transparent; 
 
\t border-bottom: 50px solid transparent; 
 
    border-top: 50px solid transparent; 
 
}

<div class="circle-1"></div> 
 
<div class="circle-2"></div> 
 
<div class="circle-3"></div> 
 
<div class="circle-4"></div>

來源

2017-02-22 Hudson Taylor

它會是一個更好的主意，在這個答案在這裏使用SVG像 - http://stackoverflow.com/questions/27943053/how-to-create-a-circle -with-links-on-border-side/34902989＃34902989（我知道'：hover'不存在於該演示中，但應該很容易添加它。）問題中的'：hover'選擇器不起作用因爲你已經將4個元素放在彼此的頂部，所以即使邊框顏色是透明的，你有權訪問的唯一元素是第四個元素。如果你把'.circle-4：hover'，它會起作用，但是它仍然不能達到你所需要的全部。 – Harry

我可以縮小解決方案，但不能有效地！我相信這會幫助你進一步移動。這是給你一個小提琴：FIDDLE

這裏是一個UPDATED FIDDLE HTML

<div><div class="circle-1"></div> 
<div class="circle-2"></div><div class="clear"></div> 
<div class="circle-3"></div> 
<div class="circle-4"></div></div>

CSS

.circle-1{ 
    float:left; 
    width: 90px; 
    height: 90px; 
    background: red; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 90px 0 0 0; 
    } 
    .circle-2 { 
     float:left; 
    width: 90px; 
    height: 90px; 
    background: black; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 0 90px 0 0; 
    } 
    .circle-3 { 
     float:left; 
    width: 90px; 
    height: 90px; 
    background: green; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 0 0 0 90px; 
    } 
    .circle-4 { 
     float:left; 
    width: 90px; 
    height: 90px; 
    background: blue; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 0 0 90px 0; 
    } 


    .circle-1:hover{ 
     float:left; 
    width: 90px; 
    height: 90px; 
    background: orange; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 90px 0 0 0; 
    } 
    .circle-2:hover { 
     float:left; 
    width: 90px; 
    height: 90px; 
    background: pink; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 0 90px 0 0; 
    } 
    .circle-3:hover { 
     float:left; 
    width: 90px; 
    height: 90px; 
    background: brown; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 0 0 0 90px; 
    } 
    .circle-4:hover { 
     float:left; 
     width: 90px; 
     height: 90px; 
     background: purple; 
    -moz-border-radius: 90px 0 0 0; 
    -webkit-border-radius: 90px 0 0 0; 
    border-radius: 0 0 90px 0; 
    } 

    .clear{clear:both;}

來源

2017-02-22 15:46:02 Venky

謝謝！這很好。 –

你已添加：將鼠標懸停在圓-1上，但此處的問題是圓圈-1位於堆棧的底部（圓圈4 - > 3 - > 2 - >圓圈1）。
嘗試添加：將鼠標懸停到圓圈4上，它將起作用。

你可以用一個div創建類似的設計。

div { 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    margin: 0 auto; 
 
    width: 0; 
 
\t height: 0; 
 
    border-radius: 50%; 
 
} 
 
.circle-1 { 
 
    border-left: 50px solid orange; 
 
\t border-right: 50px solid red; 
 
\t border-bottom: 50px solid blue; 
 
    border-top: 50px solid green; 
 
} 
 
.circle-1:hover { 
 
    border-top: 50px solid pink; 
 
    cursor: pointer; 
 
}

<div class="circle-1"></div>

來源

2017-02-22 15:41:58

如其他地方提到的，發生這種情況的原因是因爲你確實有所有4 div坐在上面與.circle-4彼此分層。

如果您不介意添加一些額外的標記，您可以通過添加一個封閉的div並調整CSS來達到相同的效果。此方法具有額外的優勢，只需要更改父項的大小即可調整整個項目的大小。

.circles{ 
 
    border-radius:50%; 
 
    font-size:0; 
 
    height:100px; 
 
    margin:0 auto 10px; 
 
    overflow:hidden; 
 
    transform:rotate(45deg); 
 
    width:100px; 
 
} 
 
.circles>div{ 
 
    display:inline-block; 
 
    padding-top:50%; 
 
    transition:background .15s linear; 
 
    width:50%; 
 
} 
 
.circle-1{ 
 
    background:green; 
 
    cursor:pointer; 
 
} 
 
.circle-2{ 
 
    background:red; 
 
} 
 
.circle-3{ 
 
    background:blue; 
 
} 
 
.circle-4{ 
 
    background:orange; 
 
} 
 
.circles>div:hover{ 
 
    background:pink; 
 
}

<div class="circles"> 
 
<div class="circle-1"></div> 
 
<div class="circle-2"></div> 
 
<div class="circle-3"></div> 
 
<div class="circle-4"></div> 
 
</div>

來源

2017-02-23 10:11:20 Shaggy

使用懸停與特殊的CSS形狀

回答

相關問題