2

Necesito utilizar la función hover y la función click(para versiones móviles), al hacerlo entran en conflicto y no se aplica ninguna. Alguien me puede auxiliar? Adjunto el código:

HTML:

<div class="item-holder no-bg productcol3 detail-label">
                <div class="inner-holder view view-ninth">
                    <div href="" id="yolomil">
                        <img src="http://sabatto.com.mx/images/2018/concepto/1FLO.jpg" class="" alt="">
                    </div>
                </div>
                <a href="{{URL::to("/catalogo/flo")}}" class="info-producto" style="display:none;">
                    <span class="info-label">COLECCIÓN LILIS </span>    
                </a>
                <a href="/Catalogo_Lilis.pdf" class="info-producto" target="_blank" style="margin-top:36%; display:none;" onclick="ga('send', 'event', 'Descarga', 'PDF', 'Catalogo Lilis')">
                    <span class="info-label"> Descarga PDF Catálogo Lilis </span>    
                </a>
            </div>

CSS:

.info-producto{
     background: rgba(0, 0, 0, 0.5);
     font-size: 14pt;
     position: absolute;
     right: 0%;
     z-index: 100;
     width: 100%;
     height: 50%;
     color: white;
     padding: 10px;
     text-align: center;
     cursor: pointer;
    }

.info-label{
     color: white;
     top: 40%;
     z-index: 500;
     position: relative;
     font-weight: lighter;
     text-transform: uppercase;
  }

JS:

'$(document).ready(function() {
        $(".detail-label").bind('click mouseover', function () {
        $( $(this).find('.info-producto') ).fadeIn( 200 );
        $( $(this).find('.info-label') ).fadeIn( 200 );
    });
   }'
2
  • si el mouseover emula el click tendrás que implementar el fade in via transiciones css (CSS Transition) y dejar el click solamente como evento el 6 abr. 2018 a las 20:21
  • Lo he pensado, pero, tengo una duda respecto a eso... la transicion se lo debo hacer a producto, seria cargarlo a otra clase, lo que pasa es que con el hover aparecen los dos enlaces uno arriba y otro abajo en web se ve bien pero en tactiles no lo aplica el 6 abr. 2018 a las 20:26

1 respuesta 1

0

El tema de rollover/mouseover/hover sobre elementos que afectan la visibilidad de otros elementos está mas dentro del ámbito de experiencia del usuario (UX) el cómo resolverlo.

En principio los navegadores (o renders de html y js) en mobile tratan de emular la experiencia desktop simulando el mouseover al click:

primer tap -> hover, mouseover segundo tap -> click

pero esto no suele ser consistente la mayoría de las veces entre plataformas o motores de renderizado.

tendrás que negociar con el diseñador (gráfico responsable del UI) como implementar estas diferentes experiencias. No siempre es evidente en mobile que hay un mouseover, en desktop si pues uno apunta el cursor adonde lleva el ojo.

de todas maneras te paso aqui una posible solución

//var ga= function(){return true}; //<- esto era para evitar errores por consola

$(document).ready(
        $(".detail-label").click(function () {
        $(this).find('.info-producto').fadeIn(200);
        $(this).find('.info-label').fadeIn(200);
    }
    ));
 
.info-producto{
     background: rgba(0, 0, 0, 0.5);
     font-size: 14pt;
     position: absolute;
     right: 0%;
     z-index: 100;
     width: 100%;
     height: 50%;
     color: white;
     padding: 10px;
     text-align: center;
     cursor: pointer;
     visibility:hidden;
     opacity:0;
     transition:opacity 1.5s linear;
    }

.info-label{
     color: white;
     top: 40%;
     z-index: 500;
     position: relative;
     font-weight: lighter;
     text-transform: uppercase;
     visibility:hidden;
     opacity:0;
     transition:opacity 1.5s linear;
}

.detail-label:hover .info-producto, .detail-label:hover .info-label {
  visibility:visible;
  opacity:1;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item-holder no-bg productcol3 detail-label">
  <div class="inner-holder view view-ninth">
    <div href="" id="yolomil">
      <img src="http://sabatto.com.mx/images/2018/concepto/1FLO.jpg" class="" alt="" />
    </div>
  </div>
  <a href="#" class="info-producto">
  <span class="info-label">COLECCIÓN LILIS </span>
  </a>
  <a href="/Catalogo_Lilis.pdf" class="info-producto" target="_blank" style="margin-top:36%;" onclick="ga('send', 'event', 'Descarga', 'PDF', 'Catalogo Lilis')">
    <span class="info-label"> Descarga PDF Catálogo Lilis </span>
  </a>
</div>

6
  • Gracias por el apoyo, respecto al css lo aplique sin necesidad de poner dos veces la clase del hover. El JS funciona pero aun asi se va a donde piques ya sea arriba o abajo, intente con event.preventdefault() pero no lo toma el 6 abr. 2018 a las 22:33
  • disculpa, mire que con la implementacion del JS se invalida el código de Google Analytics sabras algo de eso gracias de nuevo el 6 abr. 2018 a las 22:57
  • oh si lo saqué para evitar verlo en la consola remueve la parte que dice var ga= function(){return true}; y creo que algún href lo pasé a # el 6 abr. 2018 a las 23:14
  • Que tal buena tarde, lo de Google Analytics no lo copie solo la función del click, ya lo volvi a probar y sigue dando el clic aun con preventDefault, lo que si hace es que cuando tocas y arrastras, te muestra el hover. pero no esta del todo funcional el 9 abr. 2018 a las 18:03
  • el ga on click yo lo suelo delegar a una función que toma los datos de atributos (puestos en el A) y luego decide si delega el click o se queda ahí, veo si encuentro un ejemplo adaptable y te cuento. si entiendo bien sería: hover + click + ga.send evento con mobile fallback, es así? el 9 abr. 2018 a las 18:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.