溢出：对ul的最后一个li不起作用

Question

$(document).ready(function() {

  //QUALITY CONTROL
  $('#quality-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())? >resources/img/homepage/qc.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".quality-li").addClass("hover-effect");
  });

  $('#quality-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/qc.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".quality-li").removeClass("hover-effect");
  });


  //PRODUCTION
  $('#production-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/production.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".production-li").addClass("hover-effect");
  });

  $('#production-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/p.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".production-li").removeClass("hover-effect");
  });


  //CHEMICAL LABORATORY
  $('#laboratory-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/laboratory.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".laboratory-li").addClass("hover-effect");
  });

  $('#laboratory-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/cl.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".laboratory-li").removeClass("hover-effect");
  });


  //LOGISTICS
  $('#logistics-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/logistics.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".logistics-li").addClass("hover-effect");
  });

  $('#logistics-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/logistics.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".logistics-li").removeClass("hover-effect");
  });


  //REPORTS
  $('#reports-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/reports.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".reports-li").addClass("hover-effect");
  });

  $('#reports-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/rep.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".reports-li").removeClass("hover-effect");
  });


  //INVOICE
  $('#invoices-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/in.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".invoice-li").addClass("hover-effect");
  });

  $('#invoices-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/in.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".invoice-li").removeClass("hover-effect");
  });


  //WAREHOUSE
  $('#warehouse-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/warehouse.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".warehouse-li").addClass("hover-effect");
  });

  $('#warehouse-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/mr.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".warehouse-li").removeClass("hover-effect");
  });


  //QUOTATIONS
  $('#quotations-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/quotation.hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".quotation-li").addClass("hover-effect");
  });

  $('#quotations-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/quotations.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".quotation-li").removeClass("hover-effect");
  });


  //CUSTOMER SERVICES
  $('#customer-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/customer (1).hover.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".customer-li").addClass("hover-effect");
  });

  $('#customer-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/cs.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".customer-li").removeClass("hover-effect");
  });


  //CMA
  $('#cam-icon').on('mouseover', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/cma.hover (1).png");
    $(this).parents(".icons").prevAll("#text-circle").find(".cam-li").addClass("hover-effect");
  });

  $('#cam-icon').on('mouseout', function() {
    $(this).find("img").attr("src", "<?php print(base_url())?>resources/img/homepage/cma.png");
    $(this).parents(".icons").prevAll("#text-circle").find(".cam-li").removeClass("hover-effect");
  });

});

#pie_menu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

img {
  width: 50px;
  height: 50px;
}

#icon-circle {
  overflow: hidden;
  position: relative;
  z-index: 2222;
  padding: 0;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  list-style: none;
  margin-bottom: 0;
}

#text-circle {
  position: absolute;
  list-style: none;
  padding: 0;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background-color: #005B89;
  overflow: hidden;
}

#outline-circle {
  position: absolute;
  padding: 0;
  width: 515px;
  height: 515px;
  border-radius: 50%;
  background-color: white;
  overflow: hidden;
}

li {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 50%;
  transform-origin: 0 100%;
  border: 1px solid white;
}

.text {
  overflow: hidden;
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
  text-align: center;
  transform: skewY(18deg) rotate(20deg);
  padding-top: 20px;
}

.text p {
  color: white;
}

li:first-child {
  transform: rotate(0) skewY(-18deg);
}

li:nth-child(2) {
  transform: rotate(36deg) skewY(-18deg);
}

li:nth-child(3) {
  transform: rotate(72deg) skewY(-18deg);
}

li:nth-child(4) {
  transform: rotate(108deg) skewY(-18deg);
}

li:nth-child(5) {
  transform: rotate(144deg) skewY(-18deg);
}

li:nth-child(6) {
  transform: rotate(180deg) skewY(-18deg);
}

li:nth-child(7) {
  transform: rotate(216deg) skewY(-18deg);
}

li:nth-child(8) {
  transform: rotate(252deg) skewY(-18deg);
}

li:nth-child(9) {
  transform: rotate(288deg) skewY(-18deg);
}

li:nth-child(10) {
  transform: rotate(324deg) skewY(-18deg);
}

li .icon {
  background: lightgrey;
}

.circle_over {
  position: absolute;
  z-index: 33333;
  top: 50%;
  left: 50%;
  margin-top: -135px;
  margin-left: -135px;
  width: 270px;
  height: 270px;
  background-color: white;
  border-radius: 50%;
}

.circle_over img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -65px;
  margin-left: -70px;
}

.section-icon {
  width: auto;
  height: 70px;
}

.rotate {
  transform: rotate(180deg);
}

.resize45 {
  height: 45px;
  width: auto;
}

.resize65 {
  height: 65px;
  width: auto;
}

.right-padding {
  padding-right: 18px;
}

.right-padding-text {
  padding-right: 40px;
}

.left-padding-text {
  padding-left: 40px;
}

@-webkit-keyframes hvr-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

@keyframes hvr-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
}

.hvr-icon-pulse-grow {
  /*display: inline-block;*/
  /*vertical-align: middle;*/
  /*-webkit-transform: perspective(1px) translateZ(0);*/
  /*transform: perspective(1px) translateZ(0);*/
  /*box-shadow: 0 0 1px rgba(0, 0, 0, 0);*/
}

.hvr-icon-pulse-grow .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-icon-pulse-grow:hover .hvr-icon,
.hvr-icon-pulse-grow:focus .hvr-icon,
.hvr-icon-pulse-grow:active .hvr-icon {
  -webkit-animation-name: hvr-icon-pulse-grow;
  animation-name: hvr-icon-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

.hover-effect {
  background-color: #eb775f;
  overflow: hidden !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div id="pie_menu" class="col-sm-8 col-sm-offset-2">
      <div id="text-circle">
        <ul>
          <li class="production-li">
            <div class="text">
              <p class="right-padding-text"><b>PRODUCTION</b></p>
            </div>
          </li>
          <li class="logistics-li">
            <div class="text">
              <p class="right-padding-text"><b>LOGISTICS</b></p>
            </div>
          </li>
          <li class="center-block laboratory-li">
            <div class="text">
              <p class="right-padding-text"><b>CHEMICAL<br> LABORATORY</b></p>
            </div>
          </li>
          <li class="center-block quality-li">
            <div class="text">
              <p class="rotate left-padding-text"><b>QUALITY<br> CONTROL</b></p>
            </div>
          </li>
          <li class="reports-li">
            <div class="text">
              <p class="rotate left-padding-text"><b>REPORTS</b></p>
            </div>
          </li>
          <li class="invoice-li">
            <div class="text">
              <p class="rotate left-padding-text"><b>INVOICE</b></p>
            </div>
          </li>
          <li class="warehouse-li">
            <div class="text">
              <p class="rotate left-padding-text"><b>WAREHOUSE</b></p>
            </div>
          </li>
          <li class="quotation-li">
            <div class="text ">
              <p class="right-padding-text"><b>QUOTATION</b></p>
            </div>
          </li>
          <li class="center-block customer-li">
            <div class="text">
              <p class="right-padding-text"><b>CUSTOMER<br> SERVICES</b></p>
            </div>
          </li>
          <li class="cam-li">
            <div class="text">
              <p class="right-padding-text"><b>CAM</b></p>
            </div>
          </li>
        </ul>
      </div>

      <!--  <div id="outline-circle"></div> -->

      <div class="text-center icons">
        <ul id="icon-circle">
          <li>
            <a href="<?= base_url() ?>?tab=production">
              <div class="text icon hvr-icon-pulse-grow" id="production-icon">
                <img alt="production" class="section-icon right-padding hvr-icon" src="<?php print(base_url())?>resources/img/homepage/p.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=shipping">
              <div class="text icon hvr-icon-pulse-grow" id="logistics-icon">
                <img alt="logistics" class="section-icon right-padding hvr-icon" src="<?php print(base_url())?>resources/img/homepage/logistics.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=monitor">
              <div class="text icon hvr-icon-pulse-grow" id="laboratory-icon">
                <img alt="laboratory" class="resize45 right-padding hvr-icon" src="<?php print(base_url())?>resources/img/homepage/cl.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=qualitycontrol">
              <div class="text icon hvr-icon-pulse-grow" id="quality-icon">
                <img alt="quality" class="section-icon rotate right-padding hvr-icon" src="<?php print(base_url())?>resources/img/homepage/qc.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=reports">
              <div class="text icon  hvr-icon-pulse-grow" id="reports-icon">
                <img alt="reports" class="rotate right-padding resize65 hvr-icon" src="<?php print(base_url())?>resources/img/homepage/rep.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=invoices">
              <div class="text icon hvr-icon-pulse-grow" id="invoices-icon">
                <img alt="invoices" class="rotate right-padding resize65 hvr-icon" src="<?php print(base_url())?>resources/img/homepage/in.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=materials">
              <div class="text icon hvr-icon-pulse-grow" id="warehouse-icon">
                <img alt="warehouse" class="resize45 rotate right-padding hvr-icon" src="<?php print(base_url())?>resources/img/homepage/mr.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=quotations">
              <div class="text icon hvr-icon-pulse-grow" id="quotations-icon">
                <img alt="quotations" class="section-icon right-padding hvr-icon" src="<?php print(base_url())?>resources/img/homepage/quotations.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=cs">
              <div class="text icon hvr-icon-pulse-grow" id="customer-icon">
                <img alt="customer_services" class="right-padding resize65 hvr-icon" src="<?php print(base_url())?>resources/img/homepage/cs.png" />
              </div>
            </a>
          </li>
          <li>
            <a href="<?= base_url() ?>?tab=cam">
              <div class="text hvr-icon-pulse-grow" id="cam-icon">
                <img alt="cam" class="section-icon right-padding hvr-icon" src="<?php print(base_url())?>resources/img/homepage/cma.png" />
              </div>
            </a>
          </li>
        </ul>
      </div>

      <div class="circle_over">
        <img alt="atlas-logo" style="width: 140px;" src="<?php print(base_url())?>resources/img/atlas-transparent.png" />
      </div>
    </div>
  </div>
</div>

我正在做一个圆形菜单。当我将鼠标悬停在图标上时，我想影响图标本身以及图标上方文本部分的某些更改。我有两个问题，都与溢出有关。 1.在带有图标的圆圈上，最后一个li（CAM）无法正常工作（它覆盖了第一个li（生产）），当我将鼠标悬停在PRODUCTION图标上时，会影响CAM部分。所有其他li图标都可以正常工作（我在所有地方都应用了相同的样式）。 2.在带有文本的圆圈上，overflow：hidden不能正常工作，因为它只应将更改应用于悬停图标上方的文本部分。现在正在对图标上方的部分及其旁边的部分进行更改。

我附上了图片以便更好地理解。

First problem Second problem

使用overflow：hidden，我尝试在每个li上设置z-index，每个li都大于上一个li，但是问题仍然相同。