Image roll over for icons

Reply Topic
Link to this post 02 Sep 11

Hi there how would I go about creating an image rollover effect for the icons? for example the default icon i have selected rolls over to a diferent icon when hovered and selected. and the same goes for the titles as well, how would i implement an hover and active state to the items' text colour?

Link to this post 03 Sep 11

Hi nicotraut,

Unfortunately there is no way to change images on hover or active item. Ninja Simple Icon Menu is really a *simple* module.

Because Ninja Simple Icon Menu doesn't use a Joomla menu like most modules and is essentially just a list of links, there is no way to detect and identify the current active item.

To style a link on hover is no different to how you would any other link. Add the style to your Joomla template CSS file like so:

.nsi-container a:hover {color:#FF0000; font-weight: bold;}

I hope that helps.

Kind regards,

Link to this post 25 Sep 14

Please can you help me,

I want to make another image on hover in ninja icon menu too.
I changed the css like this, (see text underneath), but it doesn't work, What do I wrong?
I understand that i get the same image under every button when I do it like this and when it works. But can I make a class suffix to change the images under the buttons.

Thank you in advance

.nsi-container {overflow:hidden; position:relative; padding:0; z-index:1000; margin-top:-17px; margin-left:19px}
.nsi-container div {float:left; position:relative; left:37%; text-align:left;}
.nsi-container ul {position:relative; padding:0; margin:0; list-style:none !important;}
.nsi-container li {clear:left; float:left; margin:0; padding:10px 3.5px 0 0; text-align:center; cursor:pointer; list-style:none !important; background:transparent !important; border:none !important}
.nsi-container span {font-weight:bold; display:none}
.nsi-container img {border:none;}
.nsi-container a img,
.nsi-container a:hover img {background: url("") no repeat scroll 0 0 rgba(0,0,0,0)!important; border:none; width:41px !important;}
.nsi-container a,
.nsi-container a:hover {height:100%; text-decoration:none; background:transparent !important; border:none !important}

Best regards!
Thank you in advance


Forums Ninja Simple Icon Menu Image roll over for icons