How to transform a Jquery hover function for mobile

Question

How to transform a Jquery hover function for mobile

Navigation

#1 by (0 votes)

2

I need to use the hover function and the click function (for mobile versions), in doing so they conflict and none is applied. Can someone help me? I attach the code:

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 );
    });
   }'

jquery html css

asked by Arturo Solano 06.04.2018 в 07:47

source

1 answer

Warning C4840 in va_start pass values by ajax error

score 0 · Accepted Answer

The theme of rollover / mouseover / hover on elements that affect the visibility of other elements is more within the scope of user experience (UX) how to solve it.

In principle the browsers (or renders of html and js) in mobile try to emulate the desktop experience simulating the mouseover to the click:

first tap - > hover, mouseover second tap - > click

but this is usually not consistent most of the time between platforms or rendering engines.

You will have to negotiate with the designer (graphic responsible for the UI) how to implement these different experiences. It is not always evident in mobile that there is a mouseover, in desktop if one points the cursor where the eye is.

Anyway, I'll give you a possible solution here

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