어떻게 이런 구조가 요소의 부모 - 자식

Question

를 선택합니다 : 링크가 CSS에서이 같은

무언가를 가리킬 때

<div class="home_box"> 
    <a href="#"> 
     <img alt="" src="/10829_rf-sicherheit/images/home_boxes/home1.jpg"> 
     <span class="box_caption" style="bottom: 0px;"> 
      <span class="box_title">Sicherheit</span> 
      <span class="box_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor ...</span> 
     </span> 
    </a> 
</div> 

내가 .box_text에 액세스 할을

div.home_box a span.home_caption span.box_text {opacity:1;} 

하지만 이것은 작동하지 않는 것 같습니다!

내 실수는 어디에서 왔습니까?

Answer 1

어쩌면 당신이 경우 : 당신은 당신의 HTML에 CSS의 home_caption 및 box_caption 쓰기

div.home_box a span.box_caption span.box_text { 
    opacity:1; 
} 

Answer 2

당신은 지금 당신이 단지에 태그를 지정하고 a:hover span.home_caption span.box_text {opacity: 1;}

를 사용하여 시도해야 장군님.

Answer 3

당신은 제대로 작동하도록 잘못된 클래스와 누락 된 :hover 의사 클래스를 모두 해결해야합니다 :

div.home_box a:hover span.box_caption span.box_text { 
    opacity:1; 
} 

참고 :

불투명도 일부없이 모든 브라우저에서 지원되지 않습니다 공급 업체 접두사. 브라우저의 최대 수를 수용하기 위해, 당신은 몇 가지 추가 CSS를 추가해야합니다 :

div.home_box a:hover span.box_caption span.box_text { 
    /* Required for IE 5, 6, 7 */ 
    /* ...or something to trigger hasLayout, like zoom: 1; */ 
    width: 100%; 

    /* Theoretically for IE 8 & 9 (more valid) */ 
    /* ...but not required as filter works too */ 
    /* should come BEFORE filter */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 

    /* This works in IE 8 & 9 too */ 
    /* ... but also 5, 6, 7 */ 
    filter: alpha(opacity=100); 

    /* Older than Firefox 0.9 */ 
    -moz-opacity: 1.0; 

    /* Safari 1.x (pre WebKit!) */ 
    -khtml-opacity: 1.0; 

    /* Modern! 
    /* Firefox 0.9+, Safari 2?, Chrome any? 
    /* Opera 9+, IE 9+ */ 
    opacity: 1.0; 
} 

출처 : 면책 조항 CSS Tricks

:은 위의 조각은 두 사람과 함께 CSS 트릭에서 직접 온 수정중인 것. 첫 번째 수정은 자신의 .transparent 선택기를 전체 스 니펫으로 대체 한 것입니다. 두 번째는 사용자의 1 요청을 지원하기 위해 불투명도 값을 변경하는 것입니다.