18.09.2019, 15:18 | #1 (permalink) |
Member
Регистрация: 21.06.2011
Сообщений: 72
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 0
|
Не работает hover в jQuery
&('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> Код:
$(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');; } }); }); Код:
*{ 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; } А просто добавить ul li a:hover в css - не пойдет: нужно, чтобы css-свойства менялись только на закрепленном header'e ... Последний раз редактировалось imported_Русланн; 18.09.2019 в 15:23 Причина: Дополнение |
18.09.2019, 15:18 | |
Helpmaster
Member
Регистрация: 08.03.2016
Сообщений: 0
|
Эти ссылки могут раскрыть глаза на решение проблемы Nth-child(2n+2) на jQuery не работает Меню на JQuery. Jquery плагин Не подключается jQuery CSS: замена картинки при наведении указателя (hover) |
Ads | |
Member
Регистрация: 31.10.2006
Сообщений: 40200
Записей в дневнике: 0
Сказал(а) спасибо: 0
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 55070
|
|
|