Floating Menu :: Individual Button Hover Code Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
3 posters

    Floating Menu :: Individual Button Hover Code

    CatherinaAndrea
    CatherinaAndrea
    CatherinaAndrea
    Forumember


    Female Posts : 230
    Reputation : 19
    Language : English, Russian, Dutch
    • Post n°1

    Solved Floating Menu :: Individual Button Hover Code

    Post by CatherinaAndrea Thu 20 Oct 2011 - 17:00

    Hi all so i tried to make individual buttons move when hovered over with a mouse, but all i could do is making the entire menu move.

    These are the css codes i have:
    Code:
    ul.floating-menu {
        left: 25px;
        padding: 4px;
        position: fixed;
        top: 35%;
    }

    ul.floating-menu:hover {
        left: 35px;
        padding: 4px;
        position: fixed;
        top: 35%;
    }

    And this is the other html code:

    Code:
    <body>
    <ul class="floating-menu">
    <li>
    <a href="http://the-citadel.secretstories.org/t31-topic">
    <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Actions-mail-mark-task-icon.png" border="0" alt="ПРАВИЛА"/>
    </a>
    </li>
    <li>
    <a href="http://the-citadel.secretstories.org/f51-forum">
    <img src="http://i1098.photobucket.com/albums/g380/leahdyre23/AscensionBook1Ascensionjpeg-1.jpg" border="0" alt="Възнесение"/>
    </a>
    </li>
    <li>
    <a href="http://the-citadel.secretstories.org/f35-forum">
    <img src="http://i41.servimg.com/u/f41/13/91/36/12/png8a10.png" border="0" alt="Ревюта"/>
    </a>
    </li>
    <li>
    <a href="http://the-citadel.secretstories.org/f22-forum">
    <img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/48/Books-2-icon.png" border="0" alt="КНИГИ"/>
    </a>
    </li>
    <li>
    <a href="http://the-citadel.secretstories.org/c9-category">
    <img src="http://icons.iconarchive.com/icons/john-freeborn/ipad/48/iPad-with-keyboard-icon.png" border="0" alt="Роул Плей"/>
    </a>
    </li>
    </ul>

    Any help would be nice with the CSS code for the hover.
    • Back to top
    LGforum
    LGforum
    LGforum
    Hyperactive


    Male Posts : 2265
    Reputation : 264
    Language : English
    Location : UK
    • Post n°2

    Solved Re: Floating Menu :: Individual Button Hover Code

    Post by LGforum Thu 20 Oct 2011 - 17:11

    Because in the CSS, you have told it to move the ul.floating-menu, which is of course your whole menu.

    Your buttons are img's.
    So in the CSS you would refer to them as
    ul.floating-menu img:hover {
    }
    • Back to top
    CatherinaAndrea
    CatherinaAndrea
    CatherinaAndrea
    Forumember


    Female Posts : 230
    Reputation : 19
    Language : English, Russian, Dutch
    • Post n°3

    Solved Re: Floating Menu :: Individual Button Hover Code

    Post by CatherinaAndrea Thu 20 Oct 2011 - 17:32

    Thank you for your reply Wink
    Ah ok i see the mistake there, but now there is something weird going on with the hover. The individual button moves up to the top and flickers.

    So what would the correct code be to move the one button slightly to the right from the others.

    [EDIT]

    I fixed it to how i wanted it to react. Very Happy

    To anyone who is wondering what my code is now for the hover:

    Code:
    ul.floating-menu img:hover {
        left: 30px;
        position: relative;
    }
    • Back to top
    Sanket
    Sanket
    Sanket
    ForumGuru


    Male Posts : 48766
    Reputation : 2830
    Language : English
    Location : Mumbai
    • Post n°4

    Solved Re: Floating Menu :: Individual Button Hover Code

    Post by Sanket Thu 20 Oct 2011 - 20:35

    Since this thread appears to be solved, I will lock this thread and mark it as solved.
    Floating Menu :: Individual Button Hover Code 2j4t5a8

    Sanket Smile
    • Back to top