$(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)), и когда я наведу курсор мыши на значок PRODUCTION, это влияет на раздел CAM.Все остальные иконки li работают отлично (везде я применял один и тот же стиль).2. На кружке с текстом переполнение: скрытый также не работает, потому что он должен применять изменения только к текстовому разделу над значком, который находится над ним.Теперь вносим изменения в раздел над значком и рядом с ним.
Я включил картинки для лучшего понимания.
Первая проблема Вторая проблема
С переполнением: скрыто. Я пытался установить z-index для каждого li, каждый из которых больше предыдущего, но проблема остается прежней.