Дополнить код
<!DOCTYPE html> <html lang="ru_RU"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> .box { cursor: pointer; font-size: 24px; display: block; } .box2 { color: blue; font-size: 24px; display: block; } </style> <script> jQuery( document ).ready( function ( $ ) { $( '.box' ).hover( function () { // навели мышь на элемент $( '.box2' ).css( 'color', 'red' ); }, function () { // убрали мышь с элемента $( '.box2' ).css( 'color', '' ); } ); } ); </script> </head> <body> <div> <p class="box">Какой то текст</p> </div> <div> <p class="box2">Элемент</p> </div> </body> </html> Дополнить код, что бы когда разрешение экрана было меньше 640px то при наведении .box то .box2 менял цвет orange а когда убрали курсор с .box при разрешение меньше 640 то .box2 менял на цвет blue |
Цитата:
https://habr.com/ru/post/509258/ |
ksa,
Я могу сделать на обычном js но я не знаю правил написание синтаксиса на jQ |
Цитата:
https://jquery-docs.ru/click/ |
Сергей Ракипов, вот русский вариант...
https://basicweb.ru/jquery/jquery_event_click.php |
ksa,
Так у меня это написано в коде, мне в этом коде не хватает условий max-width |
Цитата:
https://learn.javascript.ru/ifelse |
Что-то про click я явно не в ту тему написал... :D
Там у камрада кликать на капчу не получалось. Сергей Ракипов, вот тебе вариант про разрешение на jQ... http://bologer.ru/poluchit-vysotu-i-...rana-s-jquery/ Правда я не пойму зачем именно на jQ это все определять. Тебя кто-то так заставляет? :-? |
Сергей Ракипов,
// навели мышь на элемент $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches ? 'red' : 'orange'); |
Цитата:
|
Цитата:
Вот изначально элемент черного цвета, на него навели он стал красным, убрали он снова черный. Если разрешение поменялось то при наведении один цвет а когда убрали другой цвет. |
Я пробую меня все местами и не понимаю синтаксиса, как он работает?
|
Цитата:
Цитата:
|
а : что такое?
И почему window.matchMedia('(min-width: 640px)') стоит как то не понятно, ведь это же условия которое нужно проверить |
Сергей Ракипов,
проба угадать, что вам нужно ... ))) <!DOCTYPE html> <html lang="ru_RU"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> .box { cursor: pointer; font-size: 24px; display: block; } .box2 { color: blue; font-size: 24px; display: block; } </style> <script> jQuery( document ).ready( function ( $ ) { $( '.box' ).hover( function () { // навели мышь на элемент $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches ? 'red' : 'orange'); }, function () { // убрали мышь с элемента $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches ? '' : 'Lime' ); } ); } ); </script> </head> <body> <div> <p class="box">Какой то текст</p> </div> <div> <p class="box2">Элемент</p> </div> </body> </html> |
Цитата:
читайте документацию, ссылка дана выше. |
Цитата:
|
Сергей Ракипов,
тут есть более профи по части телепатии и js))) |
Запутался, не смог. Думал на основе этого кода разберусь в основной задачи но все не просто оказалось.
<!DOCTYPE html> <html lang="ru_RU"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body{ background: #000; font-family: Verdana; font-size: 16px; } .blok { margin: 40px 40px 40px 40px; display: flex; align-items: center; } .tekst { margin: 0px 20px 0px 0px; } .tekst a { color:#22AD1D; } .tekst a:hover { color:#fff; } .ikonka { width: 94px; height: 94px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/ikonka_prais_6.svg); background-repeat: no-repeat; background-position:center; background-size: 100%; } @media (max-width:640px){ .ikonka { width: 64px; height: 64px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/ikonka_prais_9.svg); background-repeat: no-repeat; background-position:center; background-size: 100%; } } </style> <script> jQuery( document ).ready( function ( $ ) { $( '.ssilka_prays' ).hover( function () { // навели мышь на элемент $( '.ikonka_pryas' ).css( 'background-image', 'url(http://rakipov.ru/files/ikonka_prais_8.svg)' ); }, function () { // убрали мышь с элемента $( '.ikonka_pryas' ).css( 'background-image', 'url(http://rakipov.ru/files/ikonka_prais_6.svg)' ); } ); } ); </script> </head> <body> <div class="blok"> <div class="tekst"> <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a> </div> <div class="ikonka ikonka_pryas"> </div> </div> </body> </html> Вот как должно работать. Если разрешение экрана больше 640 пикселей то должна быть показана вот эта картинка ikonka_prais_6.svg если при этом разрешении навели на .ssilka_prays то картинка должна поменяться на ikonka_prais_8.svg если убрали то вернуть картинку назад. Если разрешение экрана меньше 640 пикселей то должна быть показана вот эта картинка ikonka_prais_9.svg если при этом разрешении навели на .ssilka_prays то картинка должна поменяться на ikonka_prais_10.svg если убрали то вернуть картинку назад. |
Подумал может не очень понятно. Вот я сделал на простом JS
Вот так должно работать только на JQ <!DOCTYPE html> <html lang="ru_RU"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body{ background: #000; font-family: Verdana; font-size: 16px; } .blok { margin: 40px 40px 40px 40px; display: flex; align-items: center; } .tekst { margin: 0px 20px 0px 0px; } .tekst a { color:#22AD1D; } .tekst a:hover { color:#fff; } .ikonka { width: 94px; height: 94px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/ikonka_prais_6.svg); background-repeat: no-repeat; background-position:center; background-size: 100%; } @media (max-width:640px){ .ikonka { width: 64px; height: 64px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/ikonka_prais_9.svg); background-repeat: no-repeat; background-position:center; background-size: 100%; } } </style> </head> <body> <div class="blok"> <div class="tekst"> <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a> </div> <div class="ikonka ikonka_pryas"> </div> </div> <script> let ssilka_prays = document.querySelector( ".ssilka_prays" ); let ikonka_pryas = document.querySelector( ".ikonka_pryas" ); let ssilka = () => { const windowInnerWidth = document.documentElement.clientWidth if ( windowInnerWidth >= 640 ) { ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_6.svg')"; let ssilka_2 = () => { ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_8.svg')"; }; ssilka_prays.addEventListener( "mouseover", ssilka_2 ); let ssilka_3 = () => { ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_6.svg')"; }; ssilka_prays.addEventListener( "mouseout", ssilka_3 ); } else if ( windowInnerWidth <= 640 ) { ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_9.svg')"; let ssilka_2 = () => { ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_10.svg')"; }; ssilka_prays.addEventListener( "mouseover", ssilka_2 ); let ssilka_3 = () => { ikonka_pryas.style.backgroundImage = "url('http://rakipov.ru/files/ikonka_prais_9.svg')"; }; ssilka_prays.addEventListener( "mouseout", ssilka_3 ); } console.log( windowInnerWidth ); }; window.addEventListener( "resize", ssilka ); ssilka(); </script> </body> </html> И у меня дополнительный вопрос а почему иногда иконка мигает, то есть навожусь и моргнуло а потом все норм работает, и так иногда происходит. |
Сергей Ракипов,
<!DOCTYPE html> <html lang="ru_RU"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body { background: #000; font-family: Verdana; font-size: 16px; } .blok { margin: 40px 40px 40px 40px; display: flex; align-items: center; } .tekst { margin: 0px 20px 0px 0px; } .tekst a { color: #22AD1D; } .tekst a:hover { color: #fff; } .ikonka { width: 94px; height: 94px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/ikonka_prais_6.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; } @media (max-width:640px) { .ikonka { width: 64px; height: 64px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/ikonka_prais_9.svg); background-repeat: no-repeat; background-position: center; background-size: 100%; } } </style> <script> jQuery(document).ready(function($) { [8, 10].forEach(n => { let img = new Image(); img.src = `http://rakipov.ru/files/ikonka_prais_${n}.svg`; }); //предзагрузка картинок для hover, чтоб иконка не "прыгала", по желанию $('.ssilka_prays').hover(function() { // навели мышь на элемент let n = window.matchMedia('(min-width: 640px)').matches ? 8 : 10; let url = `url(http://rakipov.ru/files/ikonka_prais_${n}.svg)`; $('.ikonka_pryas').css('background-image', url); }, function() { // убрали мышь с элемента $('.ikonka_pryas').css('background-image', ''); }); }); </script> </head> <body> <div class="blok"> <div class="tekst"> <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a> </div> <div class="ikonka ikonka_pryas"> </div> </div> </body> </html> |
Кошмарный код.
Вот вы повесили на ssilka_prays события mouseover и mouseout. Затем, если изменится размер опять вызовется ваша функция ssilka и на этот элемент опять будут вешаться те же события но с другими функциями. С другими, даже если будет выполняться то же условие, ведь эти функции заново определяются, и это будут уже совсем другие функции. Но addEventListener не отменяет предыдущие обработчики, а добавляет. Т.е в конце концов может случиться так, что у вас будет определено 100500 одинаковых функций и все они будут назначены, как обработчики событий, и будут выполняться последовательно при наступлении события. Это я писал про код Сергей Ракипов |
Цитата:
|
Чтобы иконки не "мигали" можно использовать подход со "спрайтами"...
https://learn.javascript.ru/css-sprite |
рони,
Как всегда огромное спасибо ! |
voraa,
А как правильно нужно было сделать ? |
ksa,
Спасибо вот это полезно |
рони,
А вот еще такой вопрос. Это лучше сделать в модельный файл и подгружать его или вот так куском кода на каждую страницу ?? |
Сергей Ракипов,
делать отдельный модуль, думаю нецелесообразно, но если написать более универсальный код, для таких пар, тогда возможно. |
Попробовал со спрайтами и понял что это нужная тема которую стоит использовать. И моего понимание хватило не на много. Можете дополнить код что бы он работал так как же как и код выше, только со сдвигом, я не много его написал. Но ни понимаю синтаксиса когда нужно добавлять условия на разрешение 640 px
<!DOCTYPE html> <html lang="ru_RU"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body{ background: #000; font-family: Verdana; font-size: 16px; } .blok { margin: 40px 40px 40px 40px; display: flex; align-items: center; } .tekst { margin: 0px 20px 0px 0px; } .tekst a { color:#22AD1D; } .tekst a:hover { color:#fff; } .ikonka { width: 94px; height: 94px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/prays_94.png); background-repeat: no-repeat; background-position:0px ; } .ikonka_pryas:hover { background-image: url(http://rakipov.ru/files/prays_94.png); background-repeat: no-repeat; background-position:-94px; } @media (max-width:640px){ .ikonka { width: 64px; height: 64px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/prays_64.png); background-repeat: no-repeat; background-position:0px; } .ikonka_pryas:hover { background-image: url(http://rakipov.ru/files/prays_64.png); background-repeat: no-repeat; background-position:-64px; } } </style> </head> <body> <div class="blok"> <div class="tekst"> <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a> </div> <div class="ikonka ikonka_pryas"> </div> </div> <script> jQuery(document).ready(function($) { $('.ssilka_prays').hover(function() { // навели мышь на элемент $('.ikonka_pryas').css('background-position', '-94px'); }, function() { // убрали мышь с элемента $('.ikonka_pryas').css('background-position', '0px'); }); }); </script> </body> </html> |
Сергей Ракипов,
<!DOCTYPE html> <html lang="ru_RU"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> body{ background: #000; font-family: Verdana; font-size: 16px; } .blok { margin: 40px 40px 40px 40px; display: flex; align-items: center; } .tekst { margin: 0px 20px 0px 0px; } .tekst a { color:#22AD1D; } .tekst a:hover { color:#fff; } .ikonka { width: 94px; height: 94px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/prays_94.png); background-repeat: no-repeat; background-position:0px ; } .ikonka_pryas:hover { background-image: url(http://rakipov.ru/files/prays_94.png); background-repeat: no-repeat; background-position:-94px; } @media (max-width:640px){ .ikonka { width: 64px; height: 64px; } .ikonka_pryas { background-image: url(http://rakipov.ru/files/prays_64.png); background-repeat: no-repeat; background-position:0px; } .ikonka_pryas:hover { background-image: url(http://rakipov.ru/files/prays_64.png); background-repeat: no-repeat; background-position:-64px; } } </style> </head> <body> <div class="blok"> <div class="tekst"> <a href="#" class="ssilka_prays">ПРАЙС ЛИСТ</a> </div> <div class="ikonka ikonka_pryas"> </div> </div> <script> jQuery(document).ready(function($) { $('.ssilka_prays').on('mouseenter mouseleave', function(event) { let backgroundPositionX = event.type === 'mouseleave' ? '' : window.matchMedia('(min-width: 640px)').matches ? '-94px' : '-64px'; $('.ikonka_pryas').css({backgroundPositionX}); }) }); </script> </body> </html> |
рони,
Все идеально спасибо! |
Часовой пояс GMT +3, время: 12:38. |