css - 如何通过使用 CSS 悬停其父 div 来更改一个 div 的透明度？

Question

我试图在鼠标悬停在父 div (#text_post_body) 上的博客汇总页面上的帖子片段上切换标题/日期 div (#post_h3_container) 的透明度(有效地，从不可见到可见) .仅将鼠标悬停在 #post_h3_container div 上时，我已经成功地完成了这项工作。

我尝试了 div 之间的各种选择器，包括 +、~、>(并使用 :hover)，甚至根本没有选择器，但似乎无法产生所需的效果。我已经将我的代码与 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，我会直接承认这超出了我的理解范围，所以我可能需要一个非常简单的演练来了解如何实现代码，如果是这样的话。

编辑:另一方面，也许您认为当前的悬停选项本身就没问题。如果您认为整个片段不应该显示标题/日期，我也很重视您对此事的意见。

Answer 1

CSS 悬停只能影响对象本身或其后代。在这种情况下，post_h3_container 是 sibling 的 child 。

你可以更好地组织这个并且:

HTML: 创建一个包含#by_container_perma 和#text_post_body 的元素.container

CSS:

.container:hover #post_h3_container {
opacity: 1
}

如果你不喜欢那样，我会给你一些 jQuery，但它看起来太过分了。

此外，您提到这是一个博客...请注意您的 ID。它们不应该用于重复的内容。