2014-07-22 6 views
0

앵커 태그, 이미지, 자막 (범위)이 포함 된 div에 불투명도를 추가하려고합니다. 난 내 자막은 ... 모든 사업부 블러의 작성에 표시 할 캡션의 유혹에jquery를 사용하지 않음

그래서 내가 좋아하는 사용하지 않은이

$(this).not('.Caption').css('opacity', '0.4'); 

내 몸은

<div> 
    <a href="#"><img src=""/></a> 
    <span class='Caption'>caption</span>  
</div> 

참조 같은 더 나은 이해를위한 나의 피들 .. FiDDle

업데이트 : 사실 나는 이 클래스 Caption 하나를 제외한 모든 자식 요소에 불투명도를 설정합니다

$(this).find('*').not('.Caption').css('opacity', '0.4'); 

: 마지막 데모는 Plugin에, 마지막으로 당신이 사용할 수있는

+0

'$ (이) .find보기 ('하지 (.Caption)'). CSS ('불투명', '0.4');' – Satpal

+0

@Satpal - 당신이있어에게 그것이 올바른 편집 이었는지 확인하십시오. 아마도 OP에는 해당 스팬 요소에 대한 클래스 속성이 없습니다 ... – Lix

+1

@Lix, 유효한 편집이었습니다. OP는 바이올린을 제공했습니다. 거기에 언급했다. – Satpal

답변

1

이 뜻입니까? ".caption"요소가 "사업부"내부에 있기 때문에 =>http://jsfiddle.net/ggLG8/6/

$('.thumbnail').hover(function() { 
     $(this).children().not('.Caption').css('opacity', '0.4'); 
},function(){ 
    $(this).children().not('.Caption').css('opacity', '1'); 
}); 

또한 당신은
이 시도 CSS에

+0

이것은 아무 것도하지 않는다. –

+0

@TimBJames는 바이올린을 체크 아웃하고,'.Caption' 불투명도는 변경되지 않지만 나머지는! –

+0

@Amin http://jsfiddle.net/ggLG8/8/을 참조하십시오. – user3860465

0

위의 바이올린처럼 끝났다.

0

이 앞으로 일어날를 .thumbnail:hover에서 opacity:0.4;을 제거해야합니다 :

<div class="someclass"> 
<div class="thumbnail" > 
<a class="fancybox" href="http://demo.phpgang.com/crop-images/demo_files/pool.jpg" rel="group1"> 
    <img width="150" height="120" src="http://demo.phpgang.com/crop-images/demo_files/pool.jpg"/> 
</a> 
    </div> 
    <span class='Caption' contenteditable='true'>Caption</span> 
</div> 
0

문제는 jQuery가 아니라 다른 요소가 포함 된 요소에 불투명도를 적용하기 때문에 발생합니다. 이렇게하면 포함하는 요소 내의 모든 요소가 불투명도를 상속합니다.

가장 간단한 해결책은 불투명도를 제거하고 .thumbnail 요소의 배경색을 변경하고 CSS 스타일에서 불투명도를 제거하는 것입니다.

$('.thumbnail').hover(function() { 
     $(this).not('.Caption').css('background-color', 'rgba(249, 160, 160, 0.4)'); 
     $(this).find('.Caption').animate({ 
      opacity: 'show', 
      bottom: 0 
     }, 'fast');  
}); 

updated fiddle

+0

나중에 이순신이 '아니'를 사용했다. 그러나 그것을 사용하는 데 문제가있다 ... 나는 맞다. – user3860465

관련 문제