Hello, yes, it’s possible with magic of CSS 😉
In few words, you need something like
.main-menu ul li:hover img { visibility: hidden; }
.main-menu ul li:hover img.hovered { visibility: visible; }
(it’s not 100% workable solution, I just show the way how to do it, and classes can be different, i.e. instead of .main-menu you can have .nav-menu or something like.
Thread Starter
Luc
(@lull)
Thank you !
But It doesn’t work for me :
What I’m looking for :
http://prntscr.com/e0iuri
The source code :
http://prntscr.com/e0iw8u
I have tried :
#access ul li:hover img { visibility: hidden; }
#access ul li:hover img.hovered { visibility: visible; }
doesn’t work… An idea ?
Try to use img.hovered-image instead of img.hovered
Thread Starter
Luc
(@lull)
Yes ! It’s ok with that :
#access ul li:hover img.menu-image {
opacity:0; }
#access ul li:hover img.hovered-image { opacity: 1; }
Must use opacity instead visibility.
Thanks a lot for your help and reactivity !
-
This reply was modified 9 years, 4 months ago by
Luc.
Oh, yes, I forgot about opacity, I’ve used this property to make image disappear more slowly and beautiful than with just visibility…
