Question

我试图在父div的鼠标悬停（http://www.text_post_body）上的博客汇总页面上，将标题/日期div（＃post_h3_container）的透明度（有效地，从不可见到可见）切换到帖子的片段上。当我只悬停＃post_h3_container div时，我成功地完成了这项工作。

我在div之间尝试了各种选择器，包括+，〜，＆gt; （并使用：悬停）甚至根本没有选择器，似乎无法创建所需的效果。我已将我的代码与在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是兄弟姐妹的孩子。

你可以更好地组织这个：

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

CSS：

.container:hover #post_h3_container {
opacity: 1
}

如果你不喜欢这样，我会给你一些jQuery，但它似乎过分。

另外，你提到这是一个博客......小心你的身份。它们不应用于重复内容。

Answer 2

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

而不是＃post_h3_container：悬停属性。您也可以将过渡属性应用于普通的＃post_h3_container

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

2 个答案: