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 eg m2wrap-back width & color when hovering on m2wrap-hover (which overlays 100% on other divs)?
PS 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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.