Question

我创建了四个框，当其中一个框被单击或选中时，它会创建额外的填充或边距，与其他框重叠。

我尝试过：

.marketing-service.active {
   margin: 0;
}

和

.marketing-service.active:hover {
   margin: 0;
}

但两次都失败了。查看摘要或Jsfddle时，请确保第二行至少有一个框，然后单击第一个框，然后将鼠标悬停在其上。

我可以做些什么来让所有的盒子保持在原来的位置，但是除去向下箭头造成的额外间距？

＆＃13;

$('#marketing-tab1').addClass('active');
	$('#marketing1').show();
  
  $('.marketing-service').click(function() {
		$('.marketing-service.active').removeClass('active');
		$(this).toggleClass('active');
		
		//To get the service display box to show
		var item_number = $(this).attr('id').replace('marketing-tab', '');
		/* $('html, body').animate({
		scrollTop: $("#service-display-box").offset().top
	  }, 1500);*/
		$('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
	});

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 1

删除border-color:fff。在你的css中编辑：

.marketing-service.active:before,
#marketing-tab1.active:before {
  border-color: transparent;
  border-top-color: rgba(0, 255, 170, .4);
  border-width: 36px;
  margin-left: -36px;
  margin-top: 0;
}

这是工作片段：

＆＃13;

$('#marketing-tab1').addClass('active');
	$('#marketing1').show();
  
  $('.marketing-service').click(function() {
		$('.marketing-service.active').removeClass('active');
		$(this).toggleClass('active');
		
		//To get the service display box to show
		var item_number = $(this).attr('id').replace('marketing-tab', '');
		/* $('html, body').animate({
		scrollTop: $("#service-display-box").offset().top
	  }, 1500);*/
		$('#marketing'+item_number).show().siblings('.marketing-service-section').hide();
	});

＆＃13;

#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: transparent;
  border-top-color: rgba(0, 255, 170, .4);
  border-width: 36px;
  margin-left: -36px;
  margin-top: 0;
}

＆＃13;

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

＆＃13;

保证金/填充悬停与伪元素问题

1 个答案: