Question

我是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>

Answer 1

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

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

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

Answer 2

如果你必须通过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();
});

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

2 个答案: