如何为小于 768px 的媒体禁用 mouseout visibility="hidden" 效果？

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 media queries实现），首先要获取window的宽度，设置为变量，然后设置你的条件语句是这样的：

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:

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

Answer 2

您不需要任何 JS 来执行此操作。完成此操作的最简单方法是将媒体查询定义为您想要的，将元素设置为 visibility: hidden;，然后添加悬停规则以更改可见性属性。

可见性默认可见（在较小的屏幕上），然后通过媒体查询设置为隐藏，并为较大的屏幕添加悬停功能。

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

如何为小于 768px 的媒体禁用 mouseout visibility="hidden" 效果？

how to disable mouseout visibility="hidden" effect for medias smaller than 768px?

javascript

media-queries

visibility

mouseout