CSS를 사용하여 상위 div를 가리켜 한 div의 투명도를 어떻게 변경합니까?

부모 div (#text_post_body)의 마우스 오버시 블로그 롤업 페이지의 게시물 스 니펫보다 제목/날짜 div (# post_h3_container)의 투명도를 전환하려고합니다 (사실상 보이지 않음에서 보이기). # post_h3_container div 만 마우스로 가리키면이 작업을 할 수있었습니다.CSS를 사용하여 상위 div를 가리켜 한 div의 투명도를 어떻게 변경합니까?

저는 +, ~,> (및 : 호버 사용) 등의 div 사이에서 다양한 선택기를 시도했으며 선택기도 전혀 사용하지 않아 원하는 효과를 생성 할 수 없었습니다. StackOverflow에서이 문제를 해결하는 몇 가지 답변에 내 코드를 매치했지만 여전히 주사위가 없습니다. 나는 아무것도하지 않는 것 같은 CSS 규칙에 별표를했습니다.

어떤 아이디어일까요? 제가 누락되었습니다. 그것이 Tumblr을위한 것입니다. http://bookishmatt.tumblr.com/

CSS의 :

#text_post_body { 
    max-width: 460px; 
    margin-top: -15px; 
} 

#post_h3_container { 
    position: absolute; 
    width: 450px; 
    max-height: 120px; 
    background-color:rgba(51,51,51,0.8); 
    padding: 0 5px 0 5px; 
    opacity: 0; 
} 

#post_h3_container:hover { 
    opacity: 1; 
    -webkit-transition: opacity .4s; 
} 

**#text_post_body:hover ~ #post_h3_container { 
    opacity: 1; 
    -webkit-transition: opacity .4s; 
}**

html로 :

<div id="post"> 
       <div id="text_post"> 

        {block:Text} 

        {block:Permalink}{block:Title}<div id="perma_post"><h3>{Title}</h3></div>{/block:Title} 

         <div id="post_date_perma">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container_perma">By <a href="http://plus.google.com/117485785346003231149?rel=author" class="by_container_perma">+Matt Albrecht</a> 
          {/block:Permalink} 

        {block:IndexPage}<div id="post_h3_container">{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title} 

         <div id="post_date">{block:Date}<h2>{Month} {DayOfMonth}{DayOfMonthSuffix}, {Year} at {12Hour}:{Minutes} {AmPm}</h2>{/block:Date}</div><div id="by_container">By <a href="http://plus.google.com/117485785346003231149?rel=author" class="by_container">+Matt Albrecht</a> 
          </div> {/block:IndexPage} 
       </div> 

        </div> 

        <div id="text_post_body">{Body}{block:More} <a href="{Permalink}" id="read_more">Read more...</a> {/block:More}</div> 
        <div id="notes"> 
        <p> 
         <div id="socialcomments"> 
{block:IndexPage}{block:IfDisqusShortname}<a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments</a> 
<script type="text/javascript"> 
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ 
    var disqus_shortname = 'bookishmatt'; // required: replace example with your forum shortname 

    /* * * DON'T EDIT BELOW THIS LINE * * */ 
    (function() { 
     var s = document.createElement('script'); s.async = true; 
     s.type = 'text/javascript'; 
     s.src = 'http://' + disqus_shortname + '.disqus.com/count.js'; 
     (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s); 
    }()); 
</script> 
{block:IfDisqusShortname} 
{/block:IndexPage} 

<span st_url='{Permalink}' st_title='{Title}' class='st_facebook_hcount' displayText='Facebook'></span><span st_url='{Permalink}' st_title='{Title}' class='st_twitter_hcount' displayText='Tweet'></span><span st_url='{Permalink}' st_title='{Title}' </span> 
</div> 
        {/block:Text} 

      </div>

어떤 통찰력을 환영

여기 사이트입니다. jquery가 필요한 경우, 이것이 내 머리 위로 있다는 것을 명백히 인정할 것이므로, 코드를 구현하는 방법에 대해 정말 무심코 연습해야 할 필요가 있습니다.

편집 : 다른 한편으로는 현재 호버 옵션이 독자적으로 괜찮을 수도 있습니다. 전체 스 니펫이 제목/날짜를 밝혀야한다고 생각하지 않으면 그 문제에 대한 귀하의 의견도 소중하게 생각합니다.

출처

2013-10-04 Matt Albrecht

#text_post_body:hover #post_h3_container { 
    opacity: 1.0; 
}

# post_h3_container : hover 속성 대신. 또한 전환 속성을 일반 # post_h3_container에 적용 할 수 있습니다.

출처

2013-10-04 02:28:50 russtuck91

CSS 호버는 객체 자체 나 그 자손에만 영향을 줄 수 있습니다. 이 경우 post_h3_container는 형제의 하위입니다.

이 더 나은를 구성하고 수 :

이

HTML : 이 #by_container_perma 및 #text_post_body 모두를 감싸는 요소 .container을 만들

CSS :

.container:hover #post_h3_container { 
opacity: 1 
}

것은 당신이 마음에 들지 않으면 그것, 나는 당신에게 jQuery를 줄 것이지만 그것은 과도하게 보인다.

또한이 블로그는 귀하의 신원을 조심하십시오. 반복되는 내용에 사용해서는 안됩니다.

출처

2013-10-04 02:44:49

CSS를 사용하여 상위 div를 가리켜 한 div의 투명도를 어떻게 변경합니까?

답변

관련 문제