CODEWITHSUNDEEP
jqueryhtmlcss
Sergey Khmelevskoy
Sergey Khmelevskoy

Reputation: 2544

Css hover conflicts

I have an layout with 2 rows of services, each having an dropdown with More info buttons. The problem is that those block overlays another blocks in height.

So, when Im trying to click on More info button from 1st row block, layout is triggering second row blocks hover.

Are there any css only solution or should I stick with complicated jQuery logic?

Here is an code 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

Upvotes: 0

Views: 527

Answers (2)

Ori Drori
Ori Drori

Reputation: 191976

Set for all the rows - z-index: 0, and when a row is hovered change it to z-index: 1:

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

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

Display the example in full page mode.

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

Upvotes: 1

Nandhu
Nandhu

Reputation: 339

increase z-index of .service__block-hide:hover above 3 or more

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

working fiddle https://jsfiddle.net/n4ndhu/hq1svw2x/

Upvotes: 2

Related Questions