CODEWITHSUNDEEP
csshoverparent-childtransparent
Matt Albrecht
Matt Albrecht

Reputation: 1

How do I change one div's transparency by hovering its parent div using CSS?

I'm attempting to toggle the transparency (effectively, from invisible to visible) of a title/date div (#post_h3_container) over the snippet of the post on a blog rollup page on mouseover of the parent div (#text_post_body). I've managed to make this work when hovering the #post_h3_container div only.

I've tried various selectors between the divs including +, ~, > (and using :hover) and even no selectors at all and can't seem to create the desired effect. I've matched my code to several answers addressing this on StackOverflow, but still no dice. I've starred the CSS rule that doesn't seem to be doing anything.

Any idea what it is I'm missing? This is for Tumblr, if that makes a difference.

Here's the site: http://bookishmatt.tumblr.com/

The 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; 
}**

The 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>

Any insights welcome. If jquery is needed, I'll admit outright that this is over my head, so I may need a really dumbed down walkthrough for how to implement the code, if that's the case.

EDIT: On the other hand, maybe you're of the opinion that the current hover options are alright on their own. If you don't think the whole snippet should reveal the title/date, I value your opinion on that matter, too.

Upvotes: 0

Views: 1016

Answers (2)

Neil Palmer
Neil Palmer

Reputation: 66

CSS hover can only affect the object itself or its descendants. In this case, post_h3_container is a child of a sibling.

You could organize this better and:

HTML: create an element .container that wraps both #by_container_perma and #text_post_body

CSS:

.container:hover #post_h3_container {
opacity: 1
}

If you don't like that, I will give you some jQuery, but it seems excessive.

Also, you mentioned this is a blog... be careful of your id's. They should not be used for repeated content.

Upvotes: 1

russtuck91
russtuck91

Reputation: 604

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

Instead of your #post_h3_container:hover properties. Also you can apply the transition property to just plain #post_h3_container

Upvotes: 0

Related Questions