CODEWITHSUNDEEP
htmlcsssasspseudo-element
Jarg7
Jarg7

Reputation: 1628

linking hover event to 2 or more elements

Hi I am wondering how it's possible to link a hover event to change a related element. For example, I want to make it so that hovering over the link or the icon, it will change the styling of both of them at the same time. Right now in my sass/scss I have CSS:

.iconlinks {
    color:$linkscolor;

    &:hover {
        color:darken($linkscolor,20%);
    }
}      
#icons {
    a:hover {
        i {
           color: darken($primary-color, 20%);
        }
    }
}

HTML:

<div id="icons" class="row">
    <div class="medium-4 large-4 text-center column adjust">
        <a href="#"><i id="promotional" class="fi-calendar"></i></a>
        <h4><a class="iconlinks" href="#">text</a></h4>
        <p>Text ect</p>
    </div>
</div>

So, I would like hovering over the .iconlinks or the #icons will change the styling for both. I have heard about using pseudo elements like :before and :after, but i haven't really understood their usage and if they're applicable. So, what would be the best way to accomplish this?

I also tried:

        <div class="medium-4 large-4 text-center column adjust">
          <a class"dualhover" href="#"><i id="promotional" class="fi-calendar"></i>
        <h4><a class="iconlinks" href="#">Promotional Items</a></h4></a>

css:

.dualhover:hover{
#promotional{color: darken($linkscolor,10%);}
.iconlinks{
 color: darken($linkscolor,10%);
 }
 }

my code is starting to get messy, and i need to clean up. There has to be an easier way to do this.

Upvotes: 0

Views: 758

Answers (1)

zessx
zessx

Reputation: 68790

If you're hovering #icons, you're hovering the whole block (and implicitly .iconlinks). So you don't have to care about .iconlinks:hover status:

#icons {
    .iconlinks {
        color:$linkscolor;
    }
    &:hover {
        .iconlinks {
            color:darken($linkscolor,20%);
        }
        a i {
            color: darken($primary-color, 20%);
        }
    }
}

Upvotes: 1

Related Questions