Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

CSS - Selecting element that is above on hover

I want to, when hover the overlay, activate the element above. This is what I mean

<section class="section section--special section-speciality-excerpts">
        <h2 class="highlighted header-alternative text-center"><span>What I offer</span></h2>

        <div class="speciality-exp__wrapper">
            <div class="speciality-exp__left-section-part">
            <div class="speciality-exp__equal-height speciality-exp__equal-height-first">

                <a href="http://localhost:3000/#services-section" class="speciality-exp__link-overlay"></a>
                    <i class="fa fa-list"></i>
                    <h2>Complete Website</h2>
                    <div><p>Creating a complete website from PSD to WordPress</p></div>
                    <p><a href="">Learn more</a></p>


            </div>
            </div>

            <div class="speciality-exp__right-section-part">
            <div class="speciality-exp__equal-height speciality-exp__equal-height-last">

                <div class="speciality-exp__top-panel speciality-exp__equal-height-2">
                    <div class="speciality-exp__panel-wrap">
                    <a href="" class="speciality-exp__link-overlay"></a>
                        <h2>WordPress Developemnt</h2>
                        <div><p>Creating a HTML, CSS and JS files from design</p></div>
                        <p><a href="">Learn More</a></p>
                    </div>
                </div>
                <div class="speciality-exp__bottom-panel speciality-exp__equal-height-2">
                    <div class="speciality-exp__panel-wrap">
                    <a href="" class="speciality-exp__link-overlay"></a>
                        <h2>PSD to HTML</h2>
                        <div><p>Creating a HTML, CSS and JS files from design</p></div>
                        <p><a href="">Learn More</a></p>
                    </div>
                </div>

            </div>
            </div>
        </div>

    </section>

THat is the HTML structure

And this is the CSS in Sass

.speciality-exp {

    &__wrapper {
        @include clearfix;
        border-top: 1px solid #d9d9d9;
    }

    &__left-section-part {
        position: relative;
        z-index: 15;

        &:before {
            content: ' ';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            background-color: #000;
            background-image: -webkit-gradient(linear,left bottom,left top,from(#ec3449),to(#f45c43));
            background-image: linear-gradient(to top,#ec3449 0,#f45c43 100%);
            opacity: 0;
            z-index: 10;

        }

          &:hover .speciality-exp__left-section-part:before{
                opacity: 1;
            }

        @include media-query(large) {
            float: left;
            width: 50%;
        }
    }

    &__right-section-part {
        position: relative;

        @include media-query(large) {
            float: left;
            width: 50%;
        }
    }

    &__link-overlay{
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        right: 0;
        bottom: 0;

         &:hover .speciality-exp__left-section-part:before{
                opacity: 1;
            }

    }

But the link overlay, when hover, doesn't make the opacity to 1. It doesn't even say there is anything like that in the first place.

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

You've coded the hover rule as a descendant selector that requires the element to be inside another element of the same class (which does not correspond to the HTML). Try this instead:

          //&:hover .speciality-exp__left-section-part:before {
          &:hover::before {
              opacity: 1;
          }
Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Once I figure the WP question, I'll try it, but this seems logical, yes. And yes, you're right about the descendant selector.