Hover image submenu

  • Resolved Luc

    (@lull)


    8 years, 1 month ago

    Hi, I’m using your plugin, I like it, but I have a small problem :
    When I hover over the submenu, I would like the hovered image and not the other one. Do you have a solution for that ?
    thank

Viewing 5 replies - 1 through 5 (of 5 total)

  • 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 :
    https://prntscr.com/e0iuri
    The source code :
    https://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 8 years, 1 month 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…

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Hover image submenu’ is closed to new replies.