I have a series of boxes where I want to fade out a dark mask that goes over each box when you mouseover a box and fade in the mask when you mouseout of each box. However, there is also text in each box which has a higher z-index than the other box contents. The text goes over the mask so that it (the text) is very white while the mask makes the image behind the text darker. The problem is that when you mouse over the text, the code interprets that as "mouseout" on the enclosing box, so the mask fades back in. I just want the fade in/out to happen when you mouse over/out on the box, not the text. I need a nudge to help.
https://codepen.io/lschneiderman/pen/vYPeyYm
$(".mask").on("mouseover", function() { //works fine
$(this).animate({
"opacity": 0
}, 800);
});
$("h2").on("mouseover", function() {
$(this).parent().children("mask").css({
"opacity": 0
}); //a hack that doesn't work
//to keep the mask faded out when
//mousing over h2
});
$(".mask").on("mouseout", function() { //if mouse over h2, then the mask fades back in
$(".mask").css({
"opacity": 0
});
$(this).animate({
"opacity": .5
}, 800);
});.screen {
position: relative;
width: 100%;
height: 100vh;
clear: both;
background-color: transparent;
}
.height-auto {
height: auto;
}
.black-bg {
background-color: black;
}
.section {
clear: both;
padding: 0px;
margin: 0px;
width: 100%;
}
/* COLUMN SETUP */
.col {
display: block;
float: left;
margin: 0;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
/* For IE 6/7 */
}
.span_1_of_3 {
width: 33.3%;
position: relative;
cursor: pointer;
height: 250px;
overflow: hidden;
}
.span_1_of_3 img {
width: 100%;
margin-bottom: -10px;
}
.mask {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
opacity: 1;
z-index: 5;
position: absolute;
left: 0;
top: 0;
}
h2 {
color: #fff;
background-color: transparent;
font-size: 1.1rem;
font-family: 'Roboto', sans-serif;
font-weight: bold;
position: absolute;
width: 33%;
top: 50%;
left: 50%;
text-align: center;
text-shadow: 5px 5px 10px rgba(0, 0, 0, .6);
z-index: 6;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
a:link,
a:visited {
text-decoration: underline;
color: #F1B227;
}
a:hover {
opacity: .7;
}
a.no-hover:hover {
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="screen height-auto black-bg" id="">
<div class="container" id="stories">
<div class="section group">
<div class="col span_1_of_3">
<a target="_blank" class="no-hover" href="https://www.post-gazette.com/life/drinks/2022/12/08/bars-restaurants-games-pittsburgh/stories/202210200001">
<h2>Gaming stops where you can grab a beer or a bite (Dec 08, 2022)</h2>
<div class="mask"></div>
<img src="https://www.post-gazette.com/image/2022/12/06/700x700_cMC/Helicon-Brewing-1">
</a>
</div>
<div class="col span_1_of_3">
<a target="_blank" class="no-hover" href="https://www.post-gazette.com/life/drinks/2022/12/01/holiday-popup-bars-2022/stories/202212010003">
<div class="mask"></div>
<h2>Holiday popup bars in Pittsburgh offer full-on explosions of holiday spirit (Dec 01, 2022)</h2>
<img src="https://www.post-gazette.com/image/2022/11/30/700x700_cMC/Cousin-Eddie-s-Christmas-Bar-1">
</a>
</div>
<div class="col span_1_of_3">
<a target="_blank" class="no-hover" href="https://www.post-gazette.com/life/dining/2022/11/30/pho-restaurants-pittsburgh/stories/202212010002">
<div class="mask"></div>
<h2>5 Pittsburgh restaurants serving up warming pho (Nov 30, 2022)</h2>
<img src="https://www.post-gazette.com/image/2022/11/30/700x700_cMC/pho-at-trams">
</a>
</div>
</div>
</div>
</div>
You can set
pointer-events: noneon the heading element.Otherwise, all this is easily done without any scripting, which completely sidesteps the problem. It also doesn't require extra markup for the mask. I'm just putting an extra class on the columns.