Question

我有一个包含2行服务的布局，每个服务都有一个带有更多信息按钮的下拉列表。问题是那些块覆盖了另一个高度的块。

因此，当我试图点击第一行块中的“更多信息”按钮时，布局会触发第二行块悬停。

是否有任何css解决方案或我应该坚持使用复杂的jQuery逻辑？

这是一个代码 http://codepen.io/dpmango/pen/GNBVyq

                <div class="service__block">
                    <i class="ico ico--service-1"></i>
                    <span>Service 1</span>
                    <div class="service__block-hide">
                        <a href="#" class="btn btn--outline btn--block">More info</a>
                        <a href="#" class="btn btn--main btn--block">More info</a>
                    </div>
                </div>

.service__block
  background: rgba(0,0,0,.3)
  margin-bottom: 30px
  text-align: center
  position: relative
  padding: 20px 0
  border-radius: 5px
  .ico
    width: 120px
    height: 120px
    background: rgba(0,0,0,.4)
    display: inline-block
  span
    font-size: 16px
    font-weight: 300
    display: block
    margin-top: 5px
.service__block-hide
  opacity: 0
  position: absolute
  z-index: 2
  top: 0
  left: -15px
  right: -15px
  padding-top: 220px
  transition: all .4s ease
  box-shadow: 0px 0px 13px rgba(black, .3)
  &:hover
    opacity: 1
  .btn
    margin-left: 20px
    margin-right: 20px
    position: relative
    z-index: 2

Answer 1

增加.service__block-hide的z-index：悬停在3以上

.service__block-hide
  opacity: 0
  position: absolute
  z-index: 2
  top: 0
  left: -15px
  right: -15px
  padding-top: 220px
  transition: all .4s ease
  box-shadow: 0px 0px 13px rgba(black, .3)
  &::before
    display: block
    content: ' '
    background: white
    position: absolute
    bottom: 0
    z-index: 1
    height: 100px
    width: 100%
  &:hover
    opacity: 1
    **z-index: 9 <---**

工作小提琴 https://jsfiddle.net/n4ndhu/hq1svw2x/

Answer 2

为所有行设置z-index: 0，当一行悬停时，将其更改为z-index: 1：

.row {
  position: relative;
  z-index: 0;
}

.row:hover {
  z-index: 1;
}

以整页模式显示示例。

.service__block {
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 30px;
  text-align: center;
  position: relative;
  padding: 20px 0;
  border-radius: 5px;
}
.service__block .ico {
  width: 120px;
  height: 120px;
  background: rgba(0, 0, 0, 0.4);
  display: inline-block;
}
.service__block span {
  font-size: 16px;
  font-weight: 300;
  display: block;
  margin-top: 5px;
}
.service__block-hide {
  opacity: 0;
  position: absolute;
  z-index: 2;
  top: 0;
  left: -15px;
  right: -15px;
  padding-top: 220px;
  transition: all 0.4s ease;
  box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.3);
}
.service__block-hide::before {
  display: block;
  content: " ";
  background: white;
  position: absolute;
  bottom: 0;
  z-index: 1;
  height: 100px;
  width: 100%;
}
.service__block-hide:hover {
  opacity: 1;
}
.service__block-hide .btn {
  margin-left: 20px;
  margin-right: 20px;
  position: relative;
  z-index: 2;
}

.row {
  position: relative;
  z-index: 0;
}

.row:hover {
  z-index: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- SERVICES: START -->
<section class="services">
  <div class="container">
    <div class="row" data-hover="on">
      <div class="col-sm-3">
        <div class="service__block">
          <i class="ico ico--service-1"></i>
          <span>Service 1</span>
          <div class="service__block-hide">
            <a href="#" class="btn btn--outline btn--block">More info</a>
            <a href="#" class="btn btn--main btn--block">More info</a>
          </div>
        </div>
      </div>
      <!-- next -->
      <div class="col-sm-3">
        <div class="service__block">
          <i class="ico ico--service-1"></i>
          <span>Service 2</span>
          <div class="service__block-hide">
            <a href="#" class="btn btn--outline btn--block">More info</a>
            <a href="#" class="btn btn--main btn--block">More info</a>
          </div>
        </div>
      </div>
    </div>
    <div class="row pt15" data-hover="0">
      <!-- next -->
      <div class="col-sm-3">
        <div class="service__block">
          <i class="ico ico--service-1"></i>
          <span>Service 3</span>
          <div class="service__block-hide">
            <a href="#" class="btn btn--outline btn--block">More info</a>
            <a href="#" class="btn btn--main btn--block">More info</a>
          </div>
        </div>
      </div>
      <!-- next -->
      <div class="col-sm-3">
        <div class="service__block">
          <i class="ico ico--service-1"></i>
          <span>Service 4</span>
          <div class="service__block-hide">
            <a href="#" class="btn btn--outline btn--block">More info</a>
            <a href="#" class="btn btn--main btn--block">More info</a>
          </div>
        </div>
      </div>
      <!-- next -->
    </div>
  </div>
</section>
<!-- SERVICES: END -->

Css悬停冲突

2 个答案: