Floating Menu :: Individual Button Hover Code
3 posters
Page 1 of 1
Floating Menu :: Individual Button Hover Code
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:
And this is the other html code:
Any help would be nice with the CSS code for the hover.
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.
Re: Floating Menu :: Individual Button Hover Code
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 {
}
Your buttons are img's.
So in the CSS you would refer to them as
ul.floating-menu img:hover {
}
LGforum- Hyperactive
- Posts : 2265
Reputation : 264
Language : English
Location : UK
Re: Floating Menu :: Individual Button Hover Code
Thank you for your reply
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.
To anyone who is wondering what my code is now for the hover:
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.
To anyone who is wondering what my code is now for the hover:
- Code:
ul.floating-menu img:hover {
left: 30px;
position: relative;
}
Re: Floating Menu :: Individual Button Hover Code
Since this thread appears to be solved, I will lock this thread and mark it as solved.
Sanket
Sanket
Sanket- ForumGuru
- Posts : 48766
Reputation : 2830
Language : English
Location : Mumbai
Similar topics
» Floating Menu Code Broke Forum Description
» Floating Menu
» Have Problem with floating menu
» [CSS] Google Material floating button
» Why is my Hover Over Code not working?
» Floating Menu
» Have Problem with floating menu
» [CSS] Google Material floating button
» Why is my Hover Over Code not working?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum