Не работает hover в jQuery

imported_Русланн · 18 Сен 2019

Не работает hover в jQuery

Добрый день! На web-странице нужно, чтобы менялись css свойства ссылок списка ul>li только на закрепленном в top'e 0 header'e, т.е. - при
&('header').css('position','fixed').css(top,0). Header крепится в top 0 при прокрутке вниз на 200px и открепляется.
Так вот hover через jQuey не работает.

1) HTML:

HTML:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
        <link rel="stylesheet" type="text/css" href="/CSS/StyleSheet1.css">
        <link href="https://fonts.googleapis.com/css?family=Play&display=swap&subset=cyrillic-ext" rel="stylesheet">
        <script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>
        <script src="/JS/JavaScript1.js"></script>
        <title>About Me</title>
    </head>
    <body>
        <div class="WrapperImage"></div>
        <header>
            <div class="logo-container">
                <img src="/IMG/icons8-sound-recording-copyright-40.png" alt="Logo">
                
            </div>
            <ul class="nav">
                <li><a href="#">Обо мне</a></li>
                <li><a href="#">Моя работа</a></li>
                <li><a href="#">Моя жизнь</a></li>
                <li><a href="#">Хобби</a></li>
        </header>
    

         
    </body>

2)JS:

Код:

$(window).on('load', ()=> {
    $('.WrapperImage').fadeTo(2000,0.5,function(){
        
    });

    var header1=$('header');
    var navHover=$('.nav li a');

    $(window).scroll(function(){
        if($(window).scrollTop()>=200)
        {
            header1.css('background','linear-gradient(to right, #62627e, rgb(214, 214, 221))').css('position','fixed').css(top,0);
            navHover.hover (function(event){
                if(event.type == "mouseenter") {
                    $(this).css('color','rgb(216, 248, 74)');
                  }
                  else if (event.type == "mouseleave") {
                    $(this).css('color','rgb(112, 46, 150)');
                  }
            });     
        }
        else {
            header1.removeAttr('style');
            navHover.removeAttr('style');;
        }
    });
});

3)CSS:

Код:

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{
    font-family: 'Play', sans-serif;
    position: relative;
}

.WrapperImage{
    position: absolute;
    display: block; 
    background-image: url('/IMG/P_20190610_195346_BF_1_1_1_1_1_1\ —\ копия.jpg');
    background-size: contain;
    margin: 0 auto;
    width: 1800px;
    height: 2165px;
    z-index:-1;  
}

header{
    display: flex;
    align-items: center;   
    justify-content: center ;
    margin:auto;
    border-radius: 4px;    
    width: 1800px;
    height:50px;
   background: white;
}
.logo-container,.nav{   
    display: flex; 
    
}

.logo-container{
    align-items: center;
}

.logo-container img{
    width: 40px;
    height: 40px;
    margin: 0px 0px 0px 10px;
}

.nav{
    justify-content: space-around;
    list-style: none;
    flex:2;
}

.nav li{
    padding-bottom: 7px;
}
.nav li a{
    color:rgb(112, 46, 150);
    font-weight: 900;
    font-size:20px;
    text-decoration: none;
}

Пробовал hover с добавлением и удалением класса - не помогло...
А просто добавить ul li a:hover в css - не пойдет: нужно, чтобы css-свойства менялись только на закрепленном header'e ...

Не работает hover в jQuery

imported_Русланн

Новые

Похожие темы