CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mumer91
mumer91

Reputation: 133

Change a div's appearance on hover of another div with absolute positioning (not-repeat)

I have several divs with absolute position on top of primary div which has relative position (duh). I am trying to make one div change its background-color etc when hovering another div within same parent div.

Now, I'm aware of adjacent-div classes but they don't seem to work (maybe because of absolute positioning).

Below is an example of my code (actual is a lot bigger). What would be best way to change for e.g. m2wrap-back width & color when hovering on m2wrap-hover (which overlays 100% on other divs)?

P.S. If CSS alone ain't an option, a jQuery solution can also work.

<div class="m2wrap">
  <div class="m2wrap-back">
    <h3 class="m2wrap-back-title">Title</h3>
  </div>
  <h3 class="xhfb-text"> Some text here.. </h3>
  <div class="m2wrap-bz1"></div>
  <div class="m2wrap-bz2"></div>
  <div class="m2wrap-hover"></div>
</div>
<style>
.m2wrap {
    position: relative
}
.m2wrap-back {
    position: absolute;
    top: 15px;
    left: 0;
    width: 110px;
    height: 0;
    text-align: center;
    vertical-align: middle;
}
.m2wrap-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
}
div.m2wrap-hover:hover {
    background-color: #bf0000;
}
</style>

Upvotes: 0

Views: 56

Answers (1)

Cuong Le Ngoc
Cuong Le Ngoc

Reputation: 11975

You can not do it with pure css and your current html structure, need javascipt or jquery to do this.

Example: 

$('.m2wrap-hover').hover(function() {
  $(this).closest('.m2wrap').find('.m2wrap-back').addClass('hover');
}, function() {
  $(this).closest('.m2wrap').find('.m2wrap-back').removeClass('hover');
})
.m2wrap {
    position: relative
}
.m2wrap-back {
    position: absolute;
    top: 15px;
    left: 0;
    width: 110px;
    height: 0;
    text-align: center;
    vertical-align: middle;
}
.m2wrap-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
}
div.m2wrap-hover:hover {
    background-color: #bf0000;
}
.m2wrap-back.hover {
  width: 120px;
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="m2wrap">
  <div class="m2wrap-back">
    <h3 class="m2wrap-back-title">Title</h3>
  </div>
  <h3 class="xhfb-text"> Some text here.. </h3>
  <div class="m2wrap-bz1"></div>
  <div class="m2wrap-bz2"></div>
  <div class="m2wrap-hover">hover here</div>
</div>

Or if you want to use just css, you need to change the order of your elements (because it has position: absolute so the order doesn't matter): 

.m2wrap {
    position: relative
}
.m2wrap-back {
    position: absolute;
    top: 15px;
    left: 0;
    width: 110px;
    height: 0;
    text-align: center;
    vertical-align: middle;
}
.m2wrap-hover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 4px;
    opacity: 0.6;
    cursor: pointer;
}
div.m2wrap-hover:hover {
    background-color: #bf0000;
}

.m2wrap-hover:hover + .m2wrap-back {
    width: 120px;
    color: red;
}
<div class="m2wrap">
  <h3 class="xhfb-text"> Some text here.. </h3>
  <div class="m2wrap-bz1"></div>
  <div class="m2wrap-bz2"></div>
  <div class="m2wrap-hover">hover here</div>
  <div class="m2wrap-back">
    <h3 class="m2wrap-back-title">Title</h3>
  </div>
</div>

Upvotes: 1

Related Questions