2013-06-11 2 views
-2

div를 계속 올려 놓고 싶습니다. 예를 들어 그림 위에 마우스를 올려 놓으면 프로필이 표시됩니다. 내가 마우스로 떨어지면 활성 상태로 유지됩니다.어떻게 호버와 함께 활성화 된 div를 유지합니까?

다음은 관리 프로필이 표시되는이 효과의 예입니다. http://www.datastax.com/company#management. http://jsfiddle.net/44jQa/49/

나는 이미지가 0.5 때 문서로드의 불투명도를 갖고 싶어 :

그래서 나는 다음이를 만들 알렉스 Morrise의 예를 사용했다. 내가 가리킬 때 불투명도가 1로 변경됩니다. 그리고 나서 나는 0.5로 돌아갑니다. 다음 코드가 있지만 작동하지 않는 것 같습니다.

$("#.lrow > img").css("opacity", 0.5); 

function showPart(id) { 
    $('#content .part' + id).fadeIn('400').addClass('show'); 
} 

$('.lrow ').hover(function() { 
    var id = $(this).data('id'); 
    $(this).find('img').animate({ 
     opacity: 1.0 
    }, 500); 
    if ($('.show').length == 0) { 
     showPart(id); 
    } else { 
     $('.show').removeClass('show').fadeOut('400', function() { 
      showPart(id); 
     }); 
    } 
}, $(this).find('img').animate({ 
     opacity: 0.5 
    }, 500);); 
+0

은 jquerys'.hover()'를 보았습니다. – supersize

+1

나는 @supersize에 동의합니다. API를 살펴보고 특정 문제가있는 코드를 보여줍니다. – kgdesouz

답변

0

수정 내용은 실제적으로 다른 질문이므로 추가 답변을 드리겠습니다. 귀하의 바이올린은 구문 오류를 포함한 여러 가지 문제가있었습니다. 난 당신이 찾고있는 기능으로 업데이트 :

http://jsfiddle.net/44jQa/51/

당신은 애니메이션 대신이를 사용해야합니다

$(this).find('img').fadeTo(400,'.5'); 

또 다른 문제는이 코드는 아마 크로스 브라우저 호환되지 않는 것입니다. 그러나 그것은 당신에게 무엇을해야하는지에 대한 아이디어를 줄 것입니다.

+0

감사합니다! 호환성을 높이는 방법에 대한 제안이 있습니까? 또한 초기 불투명도가 1보다 작도록 이미지가 어떻게 초기화됩니까? – user2476383

+0

초기화가 CSS에 있습니다. 또한 브라우저 간 호환성을 위해 "opacity : .5"외에도 "filter : opacity (alpha = 50)"를 사용하는 것이 좋습니다. – musicnothing

관련 문제