You can check inside the Hover function, and if it is true it does nothing, see the code:
var $meuLink = $('#meuLink');
var $divMostrarOcultar = $('#divMostrarOcultar');
$meuLink
.on('mouseover', function() {
var tamanhoJanela = $(window).width();
if (tamanhoJanela > 1200)
return;
console.log('A janela tem ' + tamanhoJanela + 'px');
})
.on('mouseout', function() {
var tamanhoJanela = $(window).width();
if (tamanhoJanela > 1200)
return;
console.log('A janela tem ' + tamanhoJanela + 'px');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:void(0)" id="meuLink">Passe o mouse</a>
<div id="divMostrarOcultar">Conteudo a mostrar/ocultar</div>
In this case, if the window is larger than 1200 it will do nothing, but if it is smaller or equal it will print in the browser console the size of the window.
Just a note to your code, prefer to use .on('event'
instead of using the event directly. See in that answer the reason.
Now how could it get in your code:
$('ul.nav li.dropdown')
.on('mouseover', function() {
if (janelaMaiorQue(1200))
return;
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(400);
})
.on('mouseout', function() {
if (janelaMaiorQue(1200))
return;
$(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(400);
});
function janelaMaiorQue(tamanho) {
var tamanhoJanela = $(window).width();
return tamanhoJanela > tamanho;
}