как сделать зависание титров работать при касании на сенсорных экранах

-1

Я создал галерею, используя только CSS, который, когда наводится миниатюра, заголовок отображается в виде. Это работает на сенсорных экранах, чтобы при нажатии и удерживании кнопки заголовок отображался. Я хотел бы сделать так, чтобы кран поднял название, а второй кран попал в галерею. Я пробовал всевозможные коды jQuery, но, похоже, ничто не позволяет включить второй ответ. Я бы тоже не возражала, если бы это было одним нажатием, за секунду или две задержки, чтобы прочитать название перед входом в галерею. Я новичок в javascript и на этом сайте, поэтому я приношу свои извинения, если не задаю это должным образом. Спасибо за вашу помощь!как сделать зависание титров работать при касании на сенсорных экранах

Вот мой код:

<head> 
    <script src="js/jquery-1.12.0.min.js"></script> 
    <script type="text/javascript"> 
    $("target").click(function(){ $(this).toggleClass("titleBox"); }); 
    </script> 
</head> 

<body ontouchstart="" class="no-touch"> 
<div class="wrap"> 

<!-- Define all of the tiles: --> 

<div class="box"> 
<div class="boxInner"> 
    <a href="buildings/colorclock.html"> 
    <img src="images/buildings/thumbs/06.jpg" alt="Color Clock House"> 
    <div class="titleBox">Color Clock House</div> 
    </a> 
    </div> 
</div> 
<div class="box"> 
    <div class="boxInner"> 
    <a href="buildings/treetriangle.html"> 
    <img src="images/buildings/thumbs/07.jpg" alt="Tree Triangle House"> 
    <div class="titleBox">Tree Triangle House</div> 
    </a> 
    </div> 
</div> 
</div> 
</body> 

<style type="text/css"> 
    body { 
    margin: 0; 
    padding: 0; 
    } 

.wrap { 
    overflow: hidden; 
    margin: auto; 
    padding: 0 10%; 
    margin-top: 40px; 
} 

.box { 
    float: left; 
    position: relative; 
    width: 20%; 
    padding-bottom: 20%; 
} 

.boxInner { 
    position: absolute; 
    left: 20px; 
    right: 20px; 
    top: 20px; 
    bottom: 20px; 
    overflow: hidden; 
} 

.boxInner img { 
    width: 100%; 
} 

.boxInner .titleBox { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin-bottom: -50px; 
    font-size: .9em; 
    background: #fff; 
    background-size: 105%; 
    color: #A59E97; 
    padding: 5px; 
    text-align: center; 
    -webkit-transition: all 0.3s ease-out; 
    -moz-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
} 


body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox { 
    margin-bottom: 0; 
} 

.boxInner:focus { 
    cursor: pointer; 
    }

источник

2016-04-07 RebT

Я ответил ** как-то ** похоже на ваш вопрос. проверьте http://stackoverflow.com/questions/36439255/jquery-triggering-fadein-and-fadeout-on-menu/36439437#36439437 –

я наконец-то смог решить нажмите один раз, включите парение, нажмите дважды, чтобы открыть ссылку на сенсорных экранах. Если кто-то интересуется кодом здесь.

jQuery(function($) { 
     $('.boxInner').on("touchstart", function (e) { 
      'use strict'; //satisfy code inspectors 
      var link = $(this); //preselect the link 
      if (link.hasClass('hover')) { 
       return true; 
      } else { 
       link.addClass('hover'); 
       $('a.taphover').not(this).removeClass('hover'); 
       e.preventDefault(); 
       return false; 
      } 
     });

источник

2016-04-09 21:40:28 RebT

как сделать зависание титров работать при касании на сенсорных экранах

ответ

Смежные вопросы