Grow your CSS skills. Land your dream job.

Hover effect problem

  • # December 21, 2012 at 3:10 pm

    I have something of this sort:


    ul class="menu"
    li
    (a href="#"(span class="menu-entypo")⌂(/span)Home(/a)
    /li
    /ul

    I want to get the entypo font-icon to turn a color while the home text turns another color on hover over the a link. How do i do that ? Better yet, can i do that? I searched google but i can’t seem to find a way to do this and so i thought where else to find an answer then here sooooo here i am. Can anyone help me?

    # December 21, 2012 at 3:21 pm

    EDIT: Hang on I reread your question. You want the regular text and the icon to be different colours?

    That’s actually a good one.

    How is the entypo character being loaded right now? Is it done via :before?

    If so you could chain the selector;

    span.menu-entypo:hover:before { color: red; }

    # December 21, 2012 at 3:31 pm

    That is exactly what i want. I want the icon and the text to be different colors when i hover the link they are within.
    So far i load the icon via a span before the home text. I haven’t really tried it with :before yet, although i hear this is the best way to use it. The reason i haven’t tried it like that is because i thought writing it my way would be easier to actually do what i wanted it to do.
    I will try your method and i will get back to you as soon as i can. Unfortunately my day job takes a lot of my time. I bet you don’t have a lot of accountants members around here :))

    # December 22, 2012 at 2:48 am

    Hey Kaladan,
    This might be one way to do it: [hover two colors](http://codepen.io/Magnusvb/pen/ljqsu “hover two colors”)

    li a:hover {
    color: red;
    }

    a:hover .menu-entypo {
    color: green;
    }

    I tried to solve it without the span – but could not

    # December 22, 2012 at 8:23 am

    This is excellent. Exactly what i needed. Thanks a lot Magnus_vb. Now that i see it, it seems quite easy but, by God, i wouldn’t have come up with this solution to save my life.

    # December 22, 2012 at 8:51 am

    Yes its possible with

    ul.menu li a:hover {
    color: pink;
    }
    ul.menu li a:hover span.menu-entypo {
    color: red
    }

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".