javascript - CSS 饼图切片无法悬停

Question

我最近一直在尝试处理 CSS 饼图菜单。一切正常，除了如果切片超过 9 个部分，悬停不起作用。更清晰图片请访问demo .

以下是我的html:

<div class="menu">
    <div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
    <div class="menu-item">
        <div class="menu-item-content active"><i class="fa fa-home"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-user"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-sliders"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-envelope"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-cog"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-archive"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-calendar"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-comments"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-database"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-send"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-support"></i></div>
    </div>
    <div class="menu-item">
        <div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
    </div>
</div>

这是我的 CSS:

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
    color: #000;
}

.menu {
    position: fixed;
    left: -60px;
    top: -60px;
    z-index: 10;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border:0.01em solid #455A64;
    background-color: #3F51B5;
    cursor:pointer;
}

.menu .menu-btn {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color:#fff;
    font-size:20px;
    transition:0.1s linear all;
}
.menu:hover .menu-btn{
    font-size:24px;
    right:28px;
    bottom: 28px;
}

.menu-items {
    position: fixed;
    top: 100px;
    left: 100px;
    z-index: 9;
    width: 200px;
    height: 200px;
    color:#fff;
    background: transparent;
    border-radius: 50%;
    /*display:none;*/
}

.menu-item {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    clip: rect(0px, 200px, 200px, 100px);
    cursor:pointer;
}

.menu-item:nth-child(1) {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.menu-item:nth-child(2) {
    -webkit-transform: rotate(112.5deg);
    -moz-transform: rotate(112.5deg);
    -o-transform: rotate(112.5deg);
    transform: rotate(112.5deg);
}
.menu-item:nth-child(3) {
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
.menu-item:nth-child(4) {
    -webkit-transform: rotate(157.5deg);
    -moz-transform: rotate(157.5deg);
    -o-transform: rotate(157.5deg);
    transform: rotate(157.5deg);
}
.menu-item:nth-child(5) {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.menu-item:nth-child(6) {
    -webkit-transform: rotate(202.5deg);
    -moz-transform: rotate(202.5deg);
    -o-transform: rotate(202.5deg);
    transform: rotate(202.5deg);
}
.menu-item:nth-child(7) {
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    -o-transform: rotate(225deg);
    transform: rotate(225deg);
}
.menu-item:nth-child(8) {
    -webkit-transform: rotate(247.5deg);
    -moz-transform: rotate(247.5deg);
    -o-transform: rotate(247.5deg);
    transform: rotate(247.5deg);
}
.menu-item:nth-child(9) {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
.menu-item:nth-child(10) {
    -webkit-transform: rotate(292.5deg);
    -moz-transform: rotate(292.5deg);
    -o-transform: rotate(292.5deg);
    transform: rotate(292.5deg);
}
.menu-item:nth-child(11) {
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    -o-transform: rotate(315deg);
    transform: rotate(315deg);
}
.menu-item:nth-child(12) {
    -webkit-transform: rotate(337.5deg);
    -moz-transform: rotate(337.5deg);
    -o-transform: rotate(337.5deg);
    transform: rotate(337.5deg);
}
.menu-item:nth-child(13) {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.menu-item:nth-child(14) {
    -webkit-transform: rotate(382.5deg);
    -moz-transform: rotate(382.5deg);
    -o-transform: rotate(382.5deg);
    transform: rotate(382.5deg);
}
.menu-item:nth-child(15) {
    -webkit-transform: rotate(405deg);
    -moz-transform: rotate(405deg);
    -o-transform: rotate(405deg);
    transform: rotate(405deg);
}
.menu-item:nth-child(16) {
    -webkit-transform: rotate(427.5deg);
    -moz-transform: rotate(427.5deg);
    -o-transform: rotate(427.5deg);
    transform: rotate(427.5deg);
}
.menu-item-content {
    position: absolute;
    width: 200px;
    height: 200px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    clip: rect(0px, 100px, 200px, 0px);
    background-color: #1b458b;
    -webkit-transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    -o-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
}
.menu-item .menu-item-content i{
    position:absolute;
    top:12px;
    left:77px;
    font-size: 16px;
    transform: rotate(180deg);
}

.menu-item .menu-item-content:hover, .menu-item .active {
    background-color : #1976D2 !important;
}

如果可以的话，还有一个问题。如果您可以在演示中观察到，每 4 个部分后边框就会丢失。请帮我解决这些问题。

Answer 1

将 menu-item 类更改为

.menu-item {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    border-radius: 100px;
    clip: rect(0px, 138px, 100px, 100px);
    cursor: pointer;
}

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
html,
body {
  color: #000;
}

.menu {
  position: fixed;
  left: -60px;
  top: -60px;
  z-index: 10;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 0.01em solid #455A64;
  background-color: #3F51B5;
  cursor: pointer;
}

.menu .menu-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  color: #fff;
  font-size: 20px;
  transition: 0.1s linear all;
}

.menu:hover .menu-btn {
  font-size: 24px;
  right: 28px;
  bottom: 28px;
}

.menu-items {
  position: fixed;
  top: 100px;
  left: 100px;
  z-index: 9;
  width: 200px;
  height: 200px;
  color: #fff;
  background: transparent;
  border-radius: 50%;
  /*display:none;*/
}

.menu-item {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0px;
  top: 0px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  clip: rect(0px, 138px, 100px, 100px);
  cursor: pointer;
}

.menu-item:nth-child(1) {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.menu-item:nth-child(2) {
  -webkit-transform: rotate(112.5deg);
  -moz-transform: rotate(112.5deg);
  -o-transform: rotate(112.5deg);
  transform: rotate(112.5deg);
}

.menu-item:nth-child(3) {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.menu-item:nth-child(4) {
  -webkit-transform: rotate(157.5deg);
  -moz-transform: rotate(157.5deg);
  -o-transform: rotate(157.5deg);
  transform: rotate(157.5deg);
}

.menu-item:nth-child(5) {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.menu-item:nth-child(6) {
  -webkit-transform: rotate(202.5deg);
  -moz-transform: rotate(202.5deg);
  -o-transform: rotate(202.5deg);
  transform: rotate(202.5deg);
}

.menu-item:nth-child(7) {
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  transform: rotate(225deg);
}

.menu-item:nth-child(8) {
  -webkit-transform: rotate(247.5deg);
  -moz-transform: rotate(247.5deg);
  -o-transform: rotate(247.5deg);
  transform: rotate(247.5deg);
}

.menu-item:nth-child(9) {
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

.menu-item:nth-child(10) {
  -webkit-transform: rotate(292.5deg);
  -moz-transform: rotate(292.5deg);
  -o-transform: rotate(292.5deg);
  transform: rotate(292.5deg);
}

.menu-item:nth-child(11) {
  -webkit-transform: rotate(315deg);
  -moz-transform: rotate(315deg);
  -o-transform: rotate(315deg);
  transform: rotate(315deg);
}

.menu-item:nth-child(12) {
  -webkit-transform: rotate(337.5deg);
  -moz-transform: rotate(337.5deg);
  -o-transform: rotate(337.5deg);
  transform: rotate(337.5deg);
}

.menu-item:nth-child(13) {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

.menu-item:nth-child(14) {
  -webkit-transform: rotate(382.5deg);
  -moz-transform: rotate(382.5deg);
  -o-transform: rotate(382.5deg);
  transform: rotate(382.5deg);
}

.menu-item:nth-child(15) {
  -webkit-transform: rotate(405deg);
  -moz-transform: rotate(405deg);
  -o-transform: rotate(405deg);
  transform: rotate(405deg);
}

.menu-item:nth-child(16) {
  -webkit-transform: rotate(427.5deg);
  -moz-transform: rotate(427.5deg);
  -o-transform: rotate(427.5deg);
  transform: rotate(427.5deg);
}

.menu-item-content {
  position: absolute;
  width: 200px;
  height: 200px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  border-radius: 100px;
  clip: rect(0px, 100px, 200px, 0px);
  background-color: #1b458b;
  -webkit-transform: rotate(22.5deg);
  -moz-transform: rotate(22.5deg);
  -o-transform: rotate(22.5deg);
  transform: rotate(22.5deg);
}

.menu-item .menu-item-content i {
  position: absolute;
  top: 12px;
  left: 77px;
  font-size: 16px;
  transform: rotate(180deg);
}

.menu-item .menu-item-content:hover,
.menu-item .active {
  background-color: #1976D2 !important;
}

<div class="menu">
  <div class="menu-btn"><i class="fa fa-bars"></i></div>
</div>
<div class="menu-items">
  <div class="menu-item">
    <div class="menu-item-content active"><i class="fa fa-home"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-user"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-sliders"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-envelope"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-cog"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-archive"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-calendar"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-comments"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-suitcase"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-database"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-graduation-cap"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-newspaper-o"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-shopping-bag"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-send"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-support"></i></div>
  </div>
  <div class="menu-item">
    <div class="menu-item-content"><i class="fa fa-question-circle-o"></i></div>
  </div>
</div>