使用悬停与特殊的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形状

回答

相关问题