Indexhibit Support

Impressum

transparency when hovering over the menu..

kkulgang / 2012-10-14 23:16:11   

Hi guys,

I wanted to ask how to change the opacity of the menu when u hover over..?
like when u have the mouse over the menu, its opaque but when u dont have ur mouse over the menu, its 50% transparent.. (or 50% opaque.. or translucent.. etc.)
I was trying to search this in the forum, and found the perfect example
alexgreenhut.com
but it was in an older version and couldn't find #menu anywhere @_@..
help?(in detail? ) :) Thanks!

Vaska A / 2012-10-15 12:09:27   

#menu is now #index.

kkulgang / 2012-10-16 00:42:17   

so i tried
#index { opacity: 0.5; etc etc... }
#index:hover { opacity: 1; etc etc... }

kkulgang / 2012-10-16 00:43:00   

and it seems to be not... working?

nahyunryleekim.com

Vaska A / 2012-10-16 00:56:38   

It is transparent - try making your background red and you will see it.

I don't see the rule for hover.

Vaska A / 2012-10-16 01:07:04   

I added this to the end of the style.css file (which is the best place for additions):

  1. #index { opacity: 0.3; background: transparent; }
  2. #index:hover { opacity: 1; }

Works great for me. Because everything is white the only real effect is the text...

Now, it's possible that some browsers might not read #index:hover properly because technically there are other div's blocking it. If that is the case, then you could write a quick piece of Jquery that would do the same thing.

Vaska A / 2012-10-16 01:17:28   

nahyunryleekim.com/projects/tadao-ando---water-temple/

When I scroll I can see that the opacity is working already.

kkulgang / 2012-10-16 01:31:40   

Yeah the opacity works, but hover doesnt :S I mean it is transparent, but i want it to be opaque when i hover over it? :S I checked both on chrome and firefox and they dont work..

Vaska A / 2012-10-16 01:35:04   

It works if you follow my example...

kkulgang / 2012-10-16 01:36:41   

is it working for you now?? or not?? :| .... i will keep trying :S

kkulgang / 2012-10-16 23:14:54   

so i have
#index { width: 215px; background-color: #fff; opacity: 0.5; /* line-height: 1.3em; */ }
and then just pasted
#index:hover { opacity: 1; }
this at the end.. still doesnt work... wh...what could be wrong with this =_=;;; doesnt work on firefox and chrome :(

ianazariah / 2012-10-25 03:49:06   

I got this to work no problem but i cant seem to figure out how to make it so when you mouse over each item only they become opaque individually all i can get it to do is the whole block at once

This thread has been closed, thank you.