Nav Bar hover ( custom buttons)

Forum version : Phpbb2
Position : Administrator
Concerned browser(s) : Google Chrome
Who the problem concerns : all
Forum link : http://gamemunity.team-talk.net/


I have this code to change image when hover but it only works on the regular buttons, how can i do to costum buttons like "http://gamemunity.team-talk.net/h6-twitch" and soo ?

Code:

#i_icon_mini_message{width:86px;height:32px;background:url(http://i21.servimg.com/u/f21/18/88/10/81/messag11.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(http://i68.servimg.com/u/f68/18/88/10/81/5654610.png) no-repeat 0 0;}

Have you fixed your issue?  I noticed all the buttons have a hover effect in the navigation menu.

So i made this code, its kinda buggy but i will correct it later

Code:

a.mainmenu:hover{
    background-color: #FF7F50
    border: 1px solid black;
    opacity: 0.99;
    filter: alpha(opacity=100)
}
 

its stay like this (the orange underline) :

You can try something like this to select the other links

Code: a.mainmenu[href*="/h6-twitch"] img

.

like this ?

Code:

a.mainmenu[href*="/h6-twitch"] {
width:86px;
height:32px;
background:url(http://i21.servimg.com/u/f21/18/88/10/81/messag11.png) !important no-repeat 0 0;
}
a.mainmenu[href*="/h6-twitch"]:hover {
width:86px;
height:32px;
background:url(http://i68.servimg.com/u/f68/18/88/10/81/5654610.png) !important no-repeat 0 0;
}
 

doesn't work @10spetter10

In your first code you work with the images so you should add

Code: img

after the code I sent. But I'm not fully understanding why, do you just want an orange border when you hover the button?

an underline but i only can with that code idk why

bump

Luis Ferreira wrote:like this ?

Code:

a.mainmenu[href*="/h6-twitch"] {
width:86px;
height:32px;
background:url(http://i21.servimg.com/u/f21/18/88/10/81/messag11.png) !important no-repeat 0 0;
}
a.mainmenu[href*="/h6-twitch"]:hover {
width:86px;
height:32px;
background:url(http://i68.servimg.com/u/f68/18/88/10/81/5654610.png) !important no-repeat 0 0;
}
 

This code should work but first make SURE that you haven't added any image for custom links you added in Admin Panel.
Remove image from there and THEN use this code. I suggest to get rid of !important too.
If you have an image already, this is a BACKGROUND image so it won't show up as it's hidden underneath it.