그레이 스케일 jquery 플러그인 및 간단한 jquery 기능이있는 CSS 문제 (부동 이미지 없음)

나는 그레이 스케일 jquery 플러그인을 사용하여 (예 : Andrew Pryde) 즉시 그레이 스케일 이미지를 사용하고 있습니다. http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/1-test-jquery-greyScale-html5.html 그레이 스케일 jquery 플러그인 및 간단한 jquery 기능이있는 CSS 문제 (부동 이미지 없음)

하지만 난 다른 JQuery와 기능을 추가하려고 :

effetc 마법처럼 작동 롤오버에 대한 이미지를 통해 정보를 표시합니다.

이 기능은 혼자 작동하지만 플러그인과 함께 나는 CSS 문제가 있습니다. 이미지가 더 이상 움직이지 않습니다. http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/3-test-jquery-hover-greyScale-html5.html

CSS에서 무엇이 잘못 되었나요?

소스 코드 (이 예제에서는 css, html, jquery를 쉽게 찾을 수 있습니다).

대단히 감사합니다!

출처

2012-10-04 Sébastien Gicquel

이미지가 프레임의 전체 너비에 걸쳐있는 블록 요소 안에 캡션으로 감싸 졌기 때문입니다. float은 부모 요소가 아닌 회색 음영 이미지에 적용되므로 모든 이미지가 플로팅 되더라도 더 이상 서로의 형제가 아닙니다. 그들은 호버 포장지의 형제입니다.

이미지는 여전히 플로팅되지만 컨테이너 (래퍼) 안에 혼자 있으며 래퍼는 플로트되지 않습니다.

JS없이 호버 캡션을 추가 할 수 있습니다. 각 .gsWrapper 요소 안에 캡션을 다른 요소로 추가하고 호버에 표시하도록 스타일을 지정하기 만하면됩니다.

박탈 다운 예 :

<div class="gsWrapper"> 
    <img class="img_mosaique_cat_projets noir_blanc" src="img/sj-concelles/220x168.jpg" alt="titre projets"> 
    <canvas class="gsCanvas" height="168" width="220" style="left: 0px; position: absolute; top: 0px;"></canvas> 

    <div class="hide-hover">test content for hover</div> 
</div>

그리고 스타일 :

.hide-hover { 
    position: absolute; 
} 

.gsWrapper:not(:hover) .hide-hover { 
    display: none; 
}

당신이 어떤 래퍼를 수용하기 위해 다른 모든 스타일과 JS 조정에 대해 걱정할 필요가 없습니다이 방법 이미지들.

다른 데모 : 캡션/숨기기 보여 jQuery를 slideToggle 효과를 사용하여 : http://jsbin.com/idugaw/3/edit

slideToggle 효과를 순수 CSS를 사용 : http://jsbin.com/idugaw/4/edit

출처

2012-10-04 21:25:04 tuff

고마워. 이제 "블록 요소 안에 캡션이있는 이미지를 래핑했습니다"라는 문제를 이해합니다. 나는 당신의 솔루션을 시도했지만 여전히 문제가 있습니다 : 캡션은 동일한 이미지에 있습니다 : http : //www.reflexion-graphic.co.kr/projets/forum/jquery/greyscale/4-test-jquery-hover-greyScale-html5.html 동의합니다. 캡션을 만들기 위해 자바 스크립트가 필요하지 않지만이 경우에는 jquery effet을 사용하고 싶습니다. slideToggle, 그 이유는 내가 jquery를 사용하고 있습니다 –

당신은 여전히 할 수 있습니다; 다음은 간단한 예입니다. http://jsbin.com/idugaw/3/edit – tuff

나는 많은 것을 시도했지만 성공하지 못했습니다. 마지막으로, 나는

으로 시도하고 괜찮아요 : http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/5-test-jquery-hover-greyScale-html5.html 또한 플러그인을 수정했습니다. gsWrapper의 CSS 속성을 삭제했습니다. '위치 : 상대적'및 '디스플레이 : 인라인 블록' 알다시피, 테이블을 사용하는 것은 좋지 않습니다. 내 기술에 대해 어떻게 생각하니? 저는 CSS로하고 싶습니다. 또한, 다른 jquery 플러그인을 시도해 볼 수도 있습니다. 어쩌면 수정할 수있는 플러그인을 찾을 수 있습니다. –

나는 당신이 할 필요가 그들이 gsWrapper CSS를 trumping되도록

.imgHover { 
    position: relative; 
    display: inline-block; 
}

이미지의 호버 된 div는 "블록"으로 표시되어있는 귀하의 CSS에 다음 코드를 넣어라고 생각합니다.

출처

2012-10-04 21:17:48

는 답장을 보내 주셔서 감사합니다. 귀하의 CSS 코드를 추가하려고했지만 여전히 문제가 있습니다 : http://www.reflexion-graphic.com/projets/forum/jquery/greyscale/3-test-jquery-hover-greyScale-html5.html 이미지가 "마우스를 올리면"움직입니다. –

그럼 Tuff의 대답을 시험해 보겠습니다. 그것은 조금 복잡하고, 그는 내가 가진 것보다 더 많은 분석을 한 것 같습니다. –

많은 도움을 주신 Brian에게 감사드립니다. 이 플러그인을 사용해봤을 때 더 복잡했습니다. –

그레이 스케일 jquery 플러그인 및 간단한 jquery 기능이있는 CSS 문제 (부동 이미지 없음)

답변

관련 문제