1
Я создал четыре окна, и когда один из ящиков щелкнул или выбрал зависание, он создает дополнительные отступы или поля, которые перекрывают другие поля.Margin/padding hover with pseudo element issue
Я пробовал делать:
.marketing-service.active {
margin: 0;
}
и
.marketing-service.active:hover {
margin: 0;
}
Но оба были неудачные попытки. При просмотре фрагмента или Jsfddle убедитесь, что по крайней мере одно окно находится во второй строке и щелкните по первому полю, а затем наведите указатель мыши на него.
Что я могу сделать, чтобы все ящики остались в исходном месте, но устранить лишний интервал, который вызывает стрелка вниз?
$('#marketing-tab1').addClass('active');
\t $('#marketing1').show();
$('.marketing-service').click(function() {
\t \t $('.marketing-service.active').removeClass('active');
\t \t $(this).toggleClass('active');
\t \t
\t \t //To get the service display box to show
\t \t var item_number = $(this).attr('id').replace('marketing-tab', '');
\t \t /* $('html, body').animate({
\t \t scrollTop: $("#service-display-box").offset().top
\t }, 1500);*/
\t \t $('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
\t });#marketing-services {
width: 80%;
margin: 0 10%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 2%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
.marketing-service-title {
font-size: 1.6em;
margin-bottom: 100px;
}
.marketing-img {
width: 125px;
height: 125px;
}
/*-- Down Arrow for boxes --*/
.marketing-service.active,
#marketing-tab1.active {
background: rgba(0, 255, 170, .4);
}
.marketing-service.active:after,
.marketing-service.active:before,
#marketing-tab1.active:after,
#marketing-tab1.active:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service.active:after,
#marketing-tab1.active:after {
border-width: 0px;
margin-left: 0px;
border-color: rgba(0, 255, 170, .4);
border-right-color: rgba(0, 255, 170, .4);
margin-top: -30px;
}
.marketing-service.active:before,
#marketing-tab1.active:before {
border-color: #FFF;
border-top-color: rgba(0, 255, 170, .4);
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">A</h2>
<img src="../images/marketing-seo.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">B</h2>
<img src="../images/marketing-ppc.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">C</h2>
<img src="../images/marketing-conversion.png" class="marketing-img">
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">D</h2>
<img src="../images/marketing-email.png" class="marketing-img">
</div>
</div>
</div>
так что вы хотите, чтобы удалить пустое пространство вокруг стрелки, но хотите, чтобы появиться стрелка? – ab29007
@kittyCat Да, точно. – Paul