Форум

Сергей Ракипов · #11 (**permalink**) 19.11.2021, 10:15

Сообщение от рони

Сергей Ракипов,

// навели мышь на элемент
                $( '.box2' ).css( 'color', window.matchMedia('(min-width: 640px)').matches  ? 'red' : 'orange');

Что то не работает как нужно но синтаксис не много понял.

Вот изначально элемент черного цвета, на него навели он стал красным, убрали он снова черный.
Если разрешение поменялось то при наведении один цвет а когда убрали другой цвет.

Сергей Ракипов · #12 (**permalink**) 19.11.2021, 10:37

Я пробую меня все местами и не понимаю синтаксиса, как он работает?

рони · #13 (**permalink**) 19.11.2021, 11:04

Сообщение от Сергей Ракипов

Если разрешение поменялось то при наведении один цвет а когда убрали другой цвет.

не осилил)))

Сообщение от Сергей Ракипов

как он работает?

так же как if Условный оператор „?“

Сергей Ракипов · #14 (**permalink**) 19.11.2021, 11:07

а : что такое?

И почему window.matchMedia('(min-width: 640px)') стоит как то не понятно, ведь это же условия которое нужно проверить

рони · #15 (**permalink**) 19.11.2021, 11:07

Сергей Ракипов,
проба угадать, что вам нужно ... )))

<!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>

рони · #16 (**permalink**) 19.11.2021, 11:09

Сообщение от Сергей Ракипов

а : что такое?

else
читайте документацию, ссылка дана выше.

Сергей Ракипов · #17 (**permalink**) 19.11.2021, 11:13

Сообщение от рони

Сергей Ракипов,
проба угадать, что вам нужно ... )))

да идеально!!! Скажите вы проходили курсы телепатии или это врожденное? ))

рони · #18 (**permalink**) 19.11.2021, 11:33

Сергей Ракипов,
тут есть более профи по части телепатии и js)))

Сергей Ракипов · #19 (**permalink**) 19.11.2021, 12:00

Запутался, не смог. Думал на основе этого кода разберусь в основной задачи но все не просто оказалось.

<!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 если убрали то вернуть картинку назад.

Сергей Ракипов · #20 (**permalink**) 19.11.2021, 15:47

Подумал может не очень понятно. Вот я сделал на простом 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>

И у меня дополнительный вопрос а почему иногда иконка мигает, то есть навожусь и моргнуло а потом все норм работает, и так иногда происходит.

Форум

Справочник

Discord чат

Курсы javascript