다중 호버 대체

Question

CSS 버튼을 만들고 있는데 지금 당장 문제에 집중하고 있습니다. 내가 원하는

나는 문제가 따르고있을 때, 수행 할 작업을

  <div class="proceed"> 
       <a onClick="startGateway('137340');"> 
        <div id="proceedButton"> 
         <div id="proceedLight"></div> 
         <h1 class="proceedText">Click to Proceed</h1> 
        </div> 
       </a> 
      </div> 

... :

.proceed { 
    width: 135px; 
    height: 38px; 
    position: relative; 
    cursor: pointer; 
} 

.proceedText { 
    position: relative; 
    margin: 0 auto; 
    max-width: 106px; 
    height: 29px; 
    padding-top: 10px; 
    opacity: 1; 
    transition: 0.7s ease-in-out; 
    -webkit-transition: 0.7s ease-in-out; 
    -moz-transition: 0.7s ease-in-out; 
    -o-transition: 0.7s ease-in-out; 
    -ms-transition: 0.7s ease-in-out; 
} 

#proceedButton { 
    background: rgba(0, 0, 0, 0.5); 
    width: 100%; 
    height: 100%; 
    border: 1px solid rgba(0, 0, 0, 0.6); 
} 

#proceedLight { 
    background: rgba(255, 255, 255, 0.06); 
    width: 100%; 
    height: 20px; 
    position: absolute; 
} 

그리고 HTML에 다음

나는 CSS에 다음과 같은 한 커서를 두 번 움직이면 각각의 요소를 마우스로 움직이면 커서가 "요소"위에있을 때만 커서를 가리키면 커서가 원하는 효과를냅니다.

다른 모든 요소에 영향을 주려면 .proceed를 가리 키려고합니다. 커서가 ".proceed"를 넘으면 다음과 같이됩니다.

.proceedText:hover { 
    opacity: 0.5; 
} 

#proceedLight:hover { 
    bottom: 0; 
} 

모든 솔루션은 무엇입니까? 각 요소를 마우스로 가리키면 원인에 따라 실제로 작동하지 않습니다.

Answer 1

호버를 .proceed에 두어야 할 필요가 있다고 생각합니다. jquery를 사용하여 DOM 및 효과를 변경하지 마십시오.

.proceed:hover .proceedText {opacity: 0.5;} 
.proceed:hover #proceedLight{bottom: 0;} 

수정 됨. jquery는 위의 설명과 마찬가지로 최상의 솔루션이라고 생각합니다.