Jquery CSS 마우스 호버 애니메이션이 원활하게 작동하지 않습니다.

jQuery를 사용하여 플래시 광고를 변환했습니다. 모든 것이 정상적으로 작동하지만 마우스를 움직이면 애니메이션이 부드럽게 작동하지 않습니다. 오른쪽 아래에는 "Details"라는 텍스트가 있고 마우스를 텍스트 위로 이동하면 전체 컨테이너가 검게 변합니다. 효과를 다음과 같이 추가했습니다.Jquery CSS 마우스 호버 애니메이션이 원활하게 작동하지 않습니다.

 $('#disclaimer').hover(
      function() { 
       $('#wrapper').addClass('hovered'); 
      }, function() { 
       $('#wrapper').removeClass('hovered'); 
      } 
     );

그러나 완벽하게 작동하지 않습니다. 때로는 효과가 있고 때로는 그렇지 않습니다. "Details"의 "D"문자 위로 마우스를 움직이면 작동하지 않습니다. 내가 여기서 무엇을 놓치고 있니? "Details"문자 위로 마우스를 움직일 때마다이 효과가 부드럽게 작동하기를 바랍니다. 검은 색으로 변해야합니다.

제안 사항 내 JsFiddle 코드입니다.

출처

2014-07-06 user3754380

인가 [이 바이올린] (http://jsfiddle.net/r3BTU/1 /) 네가 원하는 걸하고 있니? – blex

바이올린의 '#headline3Txt' 요소가 닫히지 않았습니다. – adeneo

잘 작동하는 솔루션이 정상적으로 작동하지만 세부적인 텍스트 위에 마우스를 올려 놓으면 검정색으로 바뀌고 마우스가 컨테이너의 어느 곳 으로든 움직이면 검은 색으로 남아 있습니다.내가 원하는 것은 컨테이너가 검은 색으로 변하기를 원한다. 마우스가 세부 묘사 텍스트 위에 있고 한 번 세부적인 텍스트에서 벗어나면 정상으로 바뀌어야한다. – user3754380

입니다.

이 요소가 사라지면 호버 이벤트가 더 이상 활성화되지 않으므로 무한 루프가 발생합니다. 이를 방지하려면 대신 opacity:0;을 사용하십시오. 그러면 요소가 제자리에 있지만 보이지 않게됩니다.

또한 으로 이동하려면 #disclaimer을 피해야합니다.

Here is the JS Fiddle

CSS

.hovered #Image_Car { opacity:0; } 
.hovered #ctaBtn { opacity:0; } 
.hovered #Image_logo img { opacity:0; } 
.hovered #headlineText { opacity:0; } 
.hovered #disclaimer { opacity:0; } 

#disclaimer { 
    /* ... */ 
    position:absolute; 
    top: 168px; 
    left: 235px; 
}

출처

2014-07-07 00:33:14 blex

CSS : hover 속성을 사용하는 것이 좋습니다.이 같은 간단한 스타일 변경에 자바 스크립트를 사용하는 것은 의미가 없습니다.

상위 요소의 호버 기능과 관련되지 않은 특정 요소에 문제가 있습니다. 상위 요소의 CSS에 규칙을 추가하고 거기에서 작업하면 피할 수 있습니다.

출처

2014-07-07 00:14:23 bryce

예를 들어 주시겠습니까 – user3754380

여기에 문제가되면, hovered가 표시 될 때 Detail 텍스트가 none으로 설정되어 있으므로 hover out 이벤트가 전달되어 삭제 된 클래스가 제거됩니다!

이와 부인 호버 부분을 변경하여이를 해결할 수 : 마우스가 사업부를 벗어날 때

$('#disclaimer').mouseenter(
      function (e) { 
       $('#wrapper').addClass('hovered') 
       .mouseleave(function() { 
        $('#wrapper').removeClass('hovered'); 
       }) 
      });

그래서 디테일이 사라집니다, 당신이 그것을 사라지게하려는 경우 당신은 또한 MouseMove 이벤트하도록하는 MouseLeave를 변경할 수 있습니다 그냥 움직여.

여기 당신이 #Disclaimer 요소 위에 마우스를 올려 때, 당신이 하나를 포함 display:none; 몇 가지 요소를 결과 집합 http://jsfiddle.net/r3BTU/2/

출처

2014-07-07 00:20:43 ngleich

예 마우스를 세부 정보 텍스트에서 멀리 이동하면 검정으로 바뀌고 정상으로 바뀌어야합니다. – user3754380

당신의 솔루션은 컨테이너를 검정으로 바꾸지 만 마우스를 멀리 떨어 뜨리면 세부 정보 텍스트가 나타나면 정상적으로 돌아가고 마우스는 컨테이너 내부로 이동 한 다음 검정색으로 남아있게됩니다. – user3754380

당신은 클래스 (숨겨진과 볼)와 JS와 클래스 사이의 스위치에 설정할 수 있습니다. .

var movingElement = document.getElementById("messageDiv"); 
var disclaimer = document.getElementById("disclaimer"); 
disclaimer.onmouseover= function(){  
    movingElement.className="class2";  
}; 
disclaimer.onmouseout= function(){  
    movingElement.className="class1"; 
};

가시 클래스에서 "페이드"그래서 당신은 CSS에서 trasitions을 추가 할 수 있습니다 여기 데모입니다 : http://jsfiddle.net/Nillervision/eSbzg/

출처

2014-07-07 00:41:33 Nillervision

Jquery CSS 마우스 호버 애니메이션이 원활하게 작동하지 않습니다.

답변

관련 문제