켜기 : CSS의 다른 레벨에서 불투명도 0.0으로 변경

Question

이중 전복 연결을 만들려고합니다. '사진'위로 굴림; 'fotografie'가 나타나고 'grafisch'가 사라지게하고 싶습니다 (같은 일 : grafisch를 굴릴 때 '사라지는 사진'). 나는 그것이 opactiy와 함께 가장 쉽다는 것을 알았지 만, 나는 그 코드를 알아낼 수 없다.

도움이 되었습니까?

$(document).ready(function() { 

    $(".foto").hover(function() { // Assign 'hover' action to all elements with 'foto' class 
     $(".grafisch").toggle(); // 'toggle' display on 'hover' event trigger for all elements with 'grafisch' class 
    }); 
    $(".grafisch").hover(function() { 
     $(".foto").toggle(); 
    }); 
    /* insert other jQuery code, if any */ 
    ... 
}); 

나는 희망 :

HTML

<a class="fotografie" href="URL"> 
<div class="foto">foto</div> 
<div class="fotografieh">fotografie</div> 
</a><a class="grafischontwerp" href="URL2"> 
<div class="grafisch">grafisch</div> 
<div class="grafischontwerph">grafisch ontwerp</div> 
</a> 

CSS

.masterplan .fotografie {color: #ff6666;} 
.masterplan .fotografie .fotografieh { display: none; } 
.masterplan .fotografie:hover .foto { display: none; } 
.masterplan .fotografie:hover .fotografieh { display: inline;} 
.masterplan .grafischontwerp {color: #33cccc; } 
.masterplan .grafischontwerp .grafischontwerph { display: none; } 
.masterplan .grafischontwerp:hover .grafisch { display: none; } 
.masterplan .grafischontwerp:hover .grafischontwerph { display: inline;} 

Answer 1

단지 CSS를 사용하여 쉬운 답을보고하지, 내가 jQuery를 간단하게 몇 줄을 추가하는 제안하고 싶습니다 jQuery를 사용하는 경우 도움이됩니다.

---

편집 :

마이클, 나는 당신이 자바 스크립트/jQuery를에 익숙하지 않을 수 있다는 것을 의심. 웹에서 쉽게 찾을 수있는 수많은 예제 및 자습서가 있습니다. 또한 StackOverflow도 검색해야합니다.

html과 css를 계속 사용하려면 최소한 자바 스크립트와 jQuery의 기본 개념, 가장 널리 사용되는 JavaScript 프레임 워크/라이브러리 중 하나를 배우는 것이 좋습니다.

은 다음 링크를 확인, 당신은 시작하려면 : 나는 또한 내가 이전에 쓴 코드에 몇 가지 의견을 추가

• Setting up jQuery
• How jQuery Works

알 수 있습니다. 이 주제에 대해 다른 질문이 있으면 알려주십시오.

---

체크 아웃이 데모를 - 단지 나중에 올 후손 또는 sibings를 타겟팅 할 수 있습니다>DEMO