Unable to prevent :hover from repeatedly firing - css

Question

I've got the following code. When the user hovers over the div, it should drop and stay that way until the user has hovered off of the div. When on the div, even if you move your mouse a bit, the hover action keeps firing.
html
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>
css
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.responsibility .section1:hover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
codepen
https://codepen.io/jasonhoward64/pen/YzKNxVN
Thanks!

Answer 1

You can use javascript here. Please see below code.
var targetDiv = document.getElementsByClassName("section1")[0];
targetDiv.addEventListener('mouseenter', function(){
targetDiv.classList.add('section1mouseover');
});
var testDiv = document.getElementsByClassName("section1a")[0];
testDiv.addEventListener('mouseenter', function(){
targetDiv.classList.remove('section1mouseover');
});
.box1.requirements.responsibilities {
height: 300px;
overflow: hidden;
}
.responsibility .section1 {
background-color: #c2bbb1;
height: 300px;
color: white;
font-weight: 700;
position: relative;
z-index: 2;
transition: all .3s ease;
}
.section1mouseover {
transform: translateY(300px);
}
.responsibility .section1a {
position: absolute;
z-index: 1;
top: 0;
}
<div class="whitelabelfeatures">
<div class="box1 requirements responsibilities">
<div class="responsibilitiesbox">
<div class="responsibility">
<div class="section1">
Pricing
</div>
<div class="section1a">
Pricing test
</div>
</div>
</div>
</div>
</div>

Answer 2

The problem is that your :hover needs to be actuated higher in the DOM. With your current code, when you hover over the .section1 element, once the CSS transform takes place and translates the .section1 element vertically, the cursor is both "off" and "over" the transforming element, which causes the :hover to trigger on and off in response.
So in your codepen, on line 17, change your hover to the parent element and it should work.
Instead of:
.responsibility .section1:hover, try .responsibility:hover .section1