0

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.

Jarg7
  • 1,588
  • 2
  • 13
  • 23
  • 1
    [Maybe this will be of some help to you?](http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements) – Calvin Scherle Oct 22 '14 at 08:16
  • Hmm i looked that over however it is a little differnt than my issue because I am asking if you hover over a specific element, it can cause another element to react, whereas that link seems to address causing two elements to react by hovering over a parent div with two children. Let me add the html. – Jarg7 Oct 22 '14 at 08:23
  • 1
    But your icon, links, text, etc. are all wrapped in the same div. So can you just apply the hover styling to the elements like in the above example? I don't believe you can have one element affect another unrelated element that way purely with CSS. – Calvin Scherle Oct 22 '14 at 08:34
  • Can you change the markup? Wrap the icon and heading in the link instead, then you can access them in the `a:hover` block in your SCSS – MildlySerious Oct 22 '14 at 08:58

1 Answers1

1

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%);
        }
    }
}
zessx
  • 68,042
  • 28
  • 135
  • 158
  • The thing is that `#icons` is also a `.row` and the containing div is a 4-wide column. I would assume that the final version has 3 of these blocks, so hovering over one of them would visually activate the others as well. Just a theory of course. – MildlySerious Oct 22 '14 at 09:09
  • Possible, but we could then still replace `#icons {` by `#icons > .column {`. – zessx Oct 22 '14 at 09:10
  • True, that could work! The idea is basically why I asked if the markup can be changed. With a wrapping block that's specific enough this should work fine. I was just thinking that the link itself, instead of two separate ones, would make the most sense in case they point to the same thing. – MildlySerious Oct 22 '14 at 09:13
  • You're right, they're close enough, have probably the same target, and have the same behavior. They should be merged. – zessx Oct 22 '14 at 09:27
  • this is close and with the .column child selector its close but it still highlights the links when you hover over the div column but I want it to darken the links only when you hover over the icon itself or the h4 .iconlink itself – Jarg7 Oct 22 '14 at 21:54