Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 29, 2017 at 3:57 pm #870079
    raslade

    Hi there

    I’m trying to dim all non-hovered menu items when the user hovers over one and have tried this but no luck.

    .av-main-nav:hover > div{
opacity: 0.5;
transition: all .5s linear 0;
}

.av-main-nav:hover > div:hover {
  opacity: 1.0;
}

    Any thoughts on how to sort this would be great
    Thanks
    Richard

    October 31, 2017 at 8:48 pm #870979
    Yigit

    Hey Richard,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Yigit

    November 1, 2017 at 11:51 pm #871454
    raslade

    Hi Yigit
    I’ve added an account, see below.
    Thanks
    Richard

    November 4, 2017 at 8:07 pm #872589
    Mike

    Hi,
    Try:

    #top #header .av-main-nav:hover {opacity: 0.5;}

#top #header .av-main-nav > li:hover {opacity: 1.0!important;}

    While researching I found some js that may work at the bottom of this page: Hover on “Everything But”
    is this the article that gave you the idea?

    Best regards,
    Mike

    November 4, 2017 at 9:08 pm #872603
    Guenni007

    haha – now the not selector:
    it works but makes no sense – set the normal state and change the hovered one !

    .av-main-nav li:not(:hover) {
    opacity: 0.5 !important
}
.av-main-nav li:hover {
    opacity: 1 !important
}

    you can see it here working with a skew https://webers-testseite.de/

    • This reply was modified 7 years ago by Guenni007.
    November 4, 2017 at 10:37 pm #872622
    raslade

    Hi both

    thank you for taking the time to investigate a solution. Unfortunately neither of these are exactly what I’m look for. I need the other non-hover items to dim like the example Mike mentioned, and yes that’s where I saw it first.

    Richard

    November 5, 2017 at 9:04 am #872710
    Guenni007

    you see on my test page above that it is dimmed now to 0.8 and on hovering goes to opacity 1 – but you reach the same result the other way round:

    #avia-menu li {
    opacity: 0.5 !important
}
#avia-menu li:hover {
    opacity: 1 !important
}

    the not selector is more used in templates and themes as you know ( go and make a search for “:not” in enfold folder ) – but here with a highly specific state of “hover” you can do it the common way.

    November 5, 2017 at 12:54 pm #872740
    raslade

    Hiya
    Thanks again for looking at this and with a bit of adjustment i’ve figured it out with

    .av-main-nav:hover > li {
    opacity: 0.25;
}
.av-main-nav:hover > li:hover {
    opacity: 1.0;
}

    Such a simple fix I feel a bit foolish. Oh well.
    Richard

    November 5, 2017 at 6:10 pm #872780
    Mike

    Hi,
    Thank you for sharing your solution, we will close this now. Thank you for using Enfold.

    @Guenni007     thanks for your input :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Dim other menu items when one is hovered’ is closed to new replies.