特殊なCSSシェイプでホバーを使用する

Question

:hoverを私が作ったCSSスライスで動作させるのに問題があります。透明な枠線とborder-radiusプロパティを使用して、divの外観を円の1/4のようにしています。しかし、私がホバー状態のために使用しようとするスタイルは動作しません。

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>

Answer 1

私はではなく、効率的に、解決策を絞り込むことができます！私はこれがあなたのさらなる進歩を助けると信じています。ここ はあなたのためのフィドルです：他の場所で述べたようHERE 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;} 

Answer 2

• あなたに：私はそれはdiv要素がheight: 0;とwidth: 0;を持つとは何かを持って推測しているが、私はこの問題を解決する方法がわからない...ここに私のコードですが追加されました：円-1に移動しますが、ここでの問題は円-1がスタックの最下部にあることです（円-4→3→2→円-1）。
• 追加してください：円-4に移動すると、効果があります。

1つの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>

Answer 3

ISあなたが実際にすべての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>