The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Floating Menu :: Individual Button Hover Code

View previous topic View next topic Go down

Solved Floating Menu :: Individual Button Hover Code

Post by CatherinaAndrea on October 20th 2011, 5:00 pm

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.

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Floating Menu :: Individual Button Hover Code

Post by LGforum on October 20th 2011, 5:11 pm

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 {
}

LGforum
Hyperactive

Male Posts : 2254
Reputation : 254
Language : English
Location : UK

http://www.avacweb.com/

Back to top Go down

Solved Re: Floating Menu :: Individual Button Hover Code

Post by CatherinaAndrea on October 20th 2011, 5:32 pm

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;
}

CatherinaAndrea
Forumember

Female Posts : 230
Reputation : 19
Language : English, Russian, Dutch

http://www.nailphanatic.com/

Back to top Go down

Solved Re: Floating Menu :: Individual Button Hover Code

Post by Sanket on October 20th 2011, 8:35 pm

Since this thread appears to be solved, I will lock this thread and mark it as solved.


Sanket Smile


Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum