如何禁用mouseout可见性＝“;隐藏的“;对小于768px的介质的影响

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

本文关键字：小于 768px 介质 影响 何禁用 mouseout 隐藏 可见性      更新时间：2023-09-26

我对Javascript很陌生。我创建了这种效果，当用户悬停在图像图标上时，文本会出现在图像图标下。我希望这种效果只有在屏幕超过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就可以做到这一点。实现这一点的最简单方法是将媒体查询定义为所需内容，将元素设置为visibility: hidden;，然后添加悬停规则以更改可见性属性。

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

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

如果你必须通过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();
});
相关文章：