CODEWITHSUNDEEP
htmlcsscss-selectors
Kippi
Kippi

Reputation: 111

General sibling selectors

Need help with sibling selectors. Im trying to affect an element by hovering over another element.

Here is my code.

<div class="_3-block">
    <div class="w-hidden-small block-3-inner last">
    <div class="block-3-image-container">
        <a href="#"><img class="image" src="images/bg_1.jpg" alt="bg_1.jpg"></a>
    </div>
    <div class="block-3-text-container">
        <a href="#"><h1 class="block-3-heading">XXX søknad, utbetaling av støtte, rapportering</h1></a>
    </div>
    </div>
</div>

Here is the css:

.block-3-image-container ~ .block-3-heading {
   -webkit-transition: color 500ms ease;
   -o-transition: color 500ms ease;
    transition: color 500ms ease;
    text-decoration: none;
}
.block-3-image-container:hover ~ .block-3-heading {
    color: #999;
    text-decoration: none;
}

Any help appreciated :)

Upvotes: 1

Views: 96

Answers (1)

Jack
Jack

Reputation: 9388

From MDN:

The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

You will need to update your selector to include the element that is preceded by .block-3-image-container, in this case the parent of .block-3-heading. Here's the updated selector:

.block-3-image-container:hover ~ .block-3-text-container .block-3-heading {
    color: #999;
    text-decoration: none;
}

A jsfiddle: http://jsfiddle.net/THtpx/

Upvotes: 3

Related Questions