Fred007 Fred007 - 4 months ago 27
jQuery Question

Jquery: change opacity on menu hover

I have an fixed menu that i want to change opacity when scrolled down and back up, so I made this:

JQuery: https://paste.ee/p/Ew9UW

HTML: https://paste.ee/p/5PTOE

CSS: https://paste.ee/p/RCtLj

Its working how i want, but i want to add one thing and I have no idea how.
I want to change opacity back to 1.0 when I hover over the menu bar at any point of the site (top middle bottom, it must work everywhere)
Any idea how to make it?

Fiddle example

JS :

$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll >= 70) {
$("nav").css("opacity", "0.2");
}
else {
$("nav").css("opacity", "1");
}
});


Thansk for your help

Answer

see here jsfiddle

first of all, nav is a class of an ul , so to call it you need to put a . in front of it .nav

second, just add !important to .nav:hover{opacity:1!important} so that it will overwrite the JQ. it's the quickest way...not the best way

code :

.nav:hover {
    opacity: 1!important;
    transition: 0.01s;
    background-color: #111;
    transition: 0.3s;

}

OR . a nicer way to do it is like this jsfiddle

$(window).scroll(function() {    
var scroll = $(window).scrollTop();

    if (scroll >= 70) {
        $(".nav").addClass("opac");
    }
    else {
        $(".nav").removeClass("opac")
    }   
});

CSS :

.nav.opac {opacity:0.2}
.nav.opac:hover { opacity:1;}

Add a class .opac to the .nav when scroll and then style that class in CSS. so no need for that ugly !important