javascript - 如何禁用小于 768px 的媒体的 mouseout 可见性 ="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 来做到这一点。实现此目的的最简单方法是将媒体查询定义为您想要的，将元素设置为 visibility: hide;，然后添加悬停规则来更改可见性属性。

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

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