Как отключить видимость mouseout ="скрытый" эффект для носителей размером менее 768 пикселей?

Question

Я довольно новичок в Javascript. Я создал этот эффект, когда текст появляется под значком изображения, когда пользователь наводит курсор на него. Я хотел бы, чтобы эффект работал только тогда, когда экран превышает 768 пикселей, и чтобы текст всегда оставался видимым при просмотре на небольших устройствах. Я пробовал использовать разные варианты

 if (screen.width < 768px) {}  
 and  
 @media all and (min-width: 768px) {} else {}  

контролировать эффект по своему вкусу, но без какой-либо удачи. Помогите??? Вот мой код:

<section id="s1">
<h1><a href="web/services.html">
     <img src="images/ICON-TRANSCRIPTION.png" class="hover"></a></h1>
<p class="text">TRANSCRIPTION</p>
</section>

<script> 
$('.hover').mouseover(function() {
$('.text').css("visibility","visible");
}); 

$('.hover').mouseout(function() {
$('.text').css("visibility","hidden");}); 

</script>

Answer 1

Если вы должны сделать это с помощью JS(это может быть выполнено с помощью медиазапросов CSS), сначала вы должны получить ширину окна и установить его как переменную, затем вы можете настроить свой условный оператор следующим образом:

function mouseVisibility() {
    var w = $(window).width();
    if (w > 767) {
        $('.hover').mouseover(function() {
            $('.text').css("visibility","visible");
        }); 

        $('.hover').mouseout(function() {
        $('.text').css("visibility","hidden");}); 
    }
}
mouseVisibility();

Кроме того, вы должны запустить функцию снова, если пользователь изменяет размер окна браузера:

$(window).resize(function() {
    mouseVisibility();
});

Answer 2

Вам не нужен JS для этого. Самый простой способ сделать это - определить медиазапрос как желаемый, установить элемент в visibility: hidden; а затем добавьте правило наведения, чтобы изменить атрибут видимости.

Видимость будет видна по умолчанию (на меньших экранах), а затем будет скрыта с помощью медиазапроса с добавленной функцией наведения для больших экранов.

@media all and (min-width: 768px) {
    .hover { visibility: hidden; }
    .hover:hover { visibility: visible; }
}