Learn More
Resend Email
7
monr0e
7y

Assuming I have the following:

<li>
<a href= "address" class="hovermod">
Text here
<i class="fa fa-sign-out-alt" aria-hidden="true"></I>
</a>
</i>

How can I apply the hover event to the i element when the user hovers over the a element? The only success I have had thus far is when the user hovers specifically over the i element.

question

hover

css

html
Favorite
Ranter
Comments
  • 0
    7y
    Do css li i :hover{} or jquery
  • 0
    7y
    The css used for the <i> element is making this hard, let me think, if I have an idea I'll write it.

    Let's make it clear tho, the hover event is for the i icon, not for the a content, right?
  • 0
    7y
    Maybe this will work
    (a element).getElementsByTagName("i") -> foreach (el) {
    el.onhover = function () {};
    }
  • 1
    7y
    @HAlex both elements need to light up when the a element is hovered over
  • 0
    7y
    @monr0e maybe
    a:hover, a:hover > i {
    /* Your style */
    }
  • 1
    7y
    @Alice tried that. They still observe hover independently of each other
  • 1
    7y
    @Alice I'm terrible with HTML and CSS, but I can usually get things to sort of work. I'm nitpicking really, but it's bugging me.

    Here's the relevant snippets from my project https://pastebin.com/QBctkCMf
  • 1
    7y
    @jschmold Missed your post above, giving that a shot
  • 1
    7y
    I'm going to stop and come back to this, I've been trying to fix it for a good hour. I'll post back when I figure out why it's broken
  • 0
    7y
    There you go -> https://codepen.io/anon/pen/baYYbL

    Our examples just WORK, but you probably have something that is stopping them.
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment