Clever Geek Handbook

CSS Dropdown Hover

I need help. I was making a dropdown menu with swap icons. My problem is this: I would like this to be when I skip my mouse over the main resource icon in the footer and then select another icon (like facebook), the main icon stays selected as mouse hover, but it doesn't work ...

<div class="footer large blue">Footer Blue
<div class="pull-right buttons">
    <ul>
        <li><a class="btn2 large share2 blue" href="#">Share</a>

            <ul>
                <li><a class="btn large rss" href="#">RSS</a>

                </li>
                <li><a class="btn large twitter" href="#">Twitter</a>

                </li>
                <li><a class="btn large plus" href="#">G+</a>

                </li>
                <li><a class="btn large facebook" href="#">Fb</a>

                </li>
            </ul>
        </li>
        <li><a class="btn2 large btt blue" href="#">Back to Top</a>

        </li>
    </ul>
</div>

I think the problem is that the li and a elements are two independent tags.

Take a look at this image for a better understanding of what I'm talking about (because they couldn't explain it better.).

http://db.tt/Kujz3Pv4

Here's the code: http://jsfiddle.net/zPavan/KHWJ4/2/

If there are any problems or suggestions for the code, I thank you for the advice!

+3


source to share


2 answers


Rather than depending on the hover <a>

specifically, depend on the list item that contains all <ul>

:

li:hover > .btn2.blue {
    background-color: hsl(197, 59%, 30%);
}


I would suggest specifying a specific class, for example .share

, which you can also use.

http://jsfiddle.net/ExplosionPIlls/KHWJ4/3/

+4


source


I think this will do:



.buttons ul li:hover > a {
    background-color: #1f5f79;
}
0


source






More articles:


All Articles