0

我正在尝试在父 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，我会直截了当地承认这超出了我的想象，所以我可能需要一个非常愚蠢的演练来了解如何实现代码，如果是这样的话。

编辑：另一方面，也许您认为当前的悬停选项本身就可以。如果您认为整个片段不应显示标题/日期，我也重视您对此事的看法。

4

2 回答 2

1

CSS 悬停只能影响对象本身或其后代。在这种情况下， post_h3_container 是兄弟姐妹的孩子。

您可以更好地组织它并且：

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

CSS：

.container:hover #post_h3_container {
opacity: 1
}

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

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

于 2013-10-04T02:44:49.407 回答
0 
#text_post_body:hover #post_h3_container {
    opacity: 1.0;
}

而不是您的 #post_h3_container:hover 属性。您也可以将转换属性应用于普通的#post_h3_container

于 2013-10-04T02:28:50.697 回答