0

親 div (#text_post_body) のマウスオーバーで、ブログ ロールアップ ページの投稿のスニペット上で、タイトル/日付 div (#post_h3_container) の透明度を (事実上、非表示から表示に) 切り替えようとしています。#post_h3_container div のみをホバリングすると、この作業を行うことができました。

+、~、> (および :hover を使用) などの 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 が必要な場合は、これが私の頭の中にあることをはっきりと認めます。そのため、コードを実装する方法については、本当に馬鹿げたウォークスルーが必要になる場合があります。

編集: 一方、現在のホバー オプションはそれ自体で問題ないという意見があるかもしれません。スニペット全体でタイトル/日付を明らかにすべきではないと思われる場合は、その点についてもご意見をお聞かせください.

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をあげますが、やり過ぎです。

また、これはブログだとおっしゃいましたが、ID には気をつけてください。繰り返しのコンテンツには使用しないでください。

于 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 に答える