>source

다음 코드가 있습니다. 사용자가 div 위로 마우스를 가져 가면 사용자가 div에서 마우스를 가져갈 때까지 해당 방식으로 떨어지고 그대로 있어야합니다. div에있을 때 마우스를 약간 움직여도 호버 작업이 계속 실행됩니다.

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

감사합니다!

  • 답변 # 1

    여기에서 자바 스크립트를 사용할 수 있습니다. 아래 코드를 참조하십시오.

    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>
    
    

  • 답변 # 2

    문제는 당신의 :hover 입니다  DOM에서 더 높게 작동해야합니다. 현재 코드로 .section1 위로 마우스를 가져 가면  CSS 변환이 발생하고 .section1 를 번역하면  요소를 세로로 표시하면 커서가 변환 요소를 "끄기"및 "오버"로하여 :hover 가 발생합니다.  응답으로 켜고 끌 수 있습니다.

    코드 라인의 17 행에서 호버를 상위 요소로 변경하면 작동합니다.

    대신 : 와이즈 비즈 .responsibility .section1:hover 를 사용해보십시오

    .responsibility:hover .section1

  • 이전 node.js - nodejs/graphql - 사용자 정의 datetime 스칼라를 사용하려고하는데 오류가 발생합니다
  • 다음 python - 가장자리에서 일부 값을 슬라이싱 한 후 나머지 값을 슬라이싱하기 전의 동일한 히스토그램 빈에 넣는 방법은 무엇입니까?