Hover by Jquery does not work when I change display to mobile in chrome

Navigation
0

I have a horizontal menu of the type list. with jquery it occurred to me to add a hover effect in the elements that are still in development, I copy a sample from the list: 

					<li>Busca Evento <img src="img/flechita.png" width="13" height="12">
						<ul style="display:none">
						    <li id="xUnidad" onclick="Asigno_Tipo_Consulta('xUnidad')"><a class="opciones" id="unidad" href="#">Unidad cero</a></li>
						    <li onclick="Asigno_Tipo_Consulta('xLugar')"><a class="opciones" id="lugar" href="#">Lugar seleccionado</a></li>
						    <li onclick="Asigno_Tipo_Consulta('xEstilo')"><a class="opciones" id="estilo" href="#">Estilo elegido</a></li>       
						 </ul>
					</li>

The idea was that when passing with the courses or finger (it is for a cell phone) the text becomes "In development".

I made the following script: 

		$('#bill').hover (function(){
		    $('#xunidad').css("background-color", "#2263C2");
		    $('#Unidad').text ('En Desarrollo !'); 
		    }, function(){
		    $('#xUnidad').css("background-color", "black");
		    $('#unidad').text ('Unidad Cero'); 
			});

The issue is that in chrome when I visualize in normal or desktop mode it works correctly, when I use F12 and use the toggle device toolbar to simulate a Galaxy S5, the hover stops working. I add that at the beginning I had added the hover for css but the same thing happened. Any ideas that can be?

    
asked by look68 10.12.2018 в 22:02
source

1 answer

1

As told by @Byro in the comment, hover is not for mobile browsing, since it is when the mouse hovers over an object the event occurs. For what you want to do, I recommend you use the Jquery Mobile library.

Jquery Mobile

Once downloaded and referenced, it uses the events provided by this library to slide to the right or left:

swipeleft

swipeLeft event 

$( "#bill" ).on( "swipeleft", function( event ) { 
    $('#xunidad').css("background-color", "#2263C2");
    $('#Unidad').text ('En Desarrollo !');
    $('#xUnidad').css("background-color", "black");
    $('#unidad').text ('Unidad Cero'); 
} )

swiperight

swiperight event 

$( "#bill" ).on( "swiperight", function( event ) { 
    $('#xunidad').css("background-color", "#2263C2");
    $('#Unidad').text ('En Desarrollo !');
    $('#xUnidad').css("background-color", "black");
    $('#unidad').text ('Unidad Cero'); 
} )

Already with this you only have to validate by Javascript if you are from a mobile device or a PC and thus determine the form of visualization to use. if method A (hover) or method B (swipe) 

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera 
Mini/i.test(navigator.userAgent) ) {
    $( "#bill" ).on( "swipeleft", function( event ) { 
        $('#xunidad').css("background-color", "#2263C2");
        $('#Unidad').text ('En Desarrollo !');
        $('#xUnidad').css("background-color", "black");
        $('#unidad').text ('Unidad Cero'); 
    } )
}

I hope I have helped you.

    
answered by 10.12.2018 в 22:19
Large number of requests for two ips to hosting wordpress (Possible attack?) Pass Selection of a DataGridView to another form