javascript - 对于小于768像素的媒体，如何禁用mouseout可见性=“隐藏”效果？

我是Java语言的新手。我创建了这种效果，即当用户将鼠标悬停在图像图标上时，文本会出现在图像图标下方。我希望该效果仅在屏幕超过768px时才起作用，并且使文本在较小的设备上查看时始终保持可见。我尝试使用的不同变体

 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>

最佳答案

如果必须通过JS（可通过CSS media queries完成），则首先应获取窗口的宽度并将其设置为变量，然后可以像下面这样设置条件语句：

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();
});

关于javascript - 对于小于768像素的媒体，如何禁用mouseout可见性=“隐藏”效果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29174584/