css - 无法阻止 :hover from repeatedly firing

Question

我有以下代码。当用户将鼠标悬停在 div 上时，它应该下降并保持这种状态，直到用户将鼠标悬停在 div 上。在 div 上时，即使您稍微移动鼠标，悬停 Action 也会继续触发。

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;
}

代码笔

https://codepen.io/jasonhoward64/pen/YzKNxVN

谢谢!

Answer 1

您可以在此处使用 javascript。请看下面的代码。

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>