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

i pretty new @ javascript. created effect text appears under image icon when user hovers on it. effect work when screen on 768px , text stay visible @ times when viewed on smaller devices. i've tried using different variants of

 if (screen.width < 768px) {}    ,    @media , (min-width: 768px) {} else {}   

to control effect liking without luck. help??? here code:

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

if must via js(this can accomplished css media queries), first should width of window , set variable, can set conditional statement so:

function mousevisibility() {     var w = $(window).width();     if (w > 767) {         $('.hover').mouseover(function() {             $('.text').css("visibility","visible");         });           $('.hover').mouseout(function() {         $('.text').css("visibility","hidden");});      } } mousevisibility(); 

additionally, should fire function again if user resizes browser window:

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