Question

我无法让:hover使用我制作的CSS饼图片。我使用透明边框和border-radius属性使我的div看起来像1/4的馅饼。但是，我尝试用于悬停状态的任何样式都不起作用。我猜它与有height: 0;和width: 0;的div有关，但我不知道如何解决这个问题......这是我的代码：

div {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
	height: 0;
  border-radius: 50%;
}
.circle-1 {
  border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	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;
	border-right: 50px solid red;
	border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}
.circle-3 {
  border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid blue;
  border-top: 50px solid transparent;
}
.circle-4 {
  border-left: 50px solid orange;
	border-right: 50px solid transparent;
	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

您已添加：hover to circle-1，但问题是circle-1位于堆栈的底部（circle-4 - ＆gt; 3 - ＆gt; 2 - ＆gt; circle-1）。
尝试添加：将鼠标悬停在circle-4上，它会正常工作。

您可以使用一个div本身创建类似的设计。

div {  
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  width: 0;
	height: 0;
  border-radius: 50%;
}
.circle-1 {
  border-left: 50px solid orange;
	border-right: 50px solid red;
	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 2

我可以缩小解决方案，但效率不高！我相信这会帮助你进一步前进。这是一个小提琴：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 3

正如其他地方所提到的，发生这种情况的原因是因为实际上所有4 div层叠在一起，而.circle-4位于顶层。

如果你不介意添加一些额外的标记，你可以通过添加一个封闭的div并调整你的CSS来达到同样的效果。此方法的另一个优点是只需要更改父div的尺寸以调整整个事物的大小。

.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>

使用悬停与特殊CSS形状

3 个答案: