CSS悬停在移动设备上

Question

我创建了一个网络应用程序，用户可以在其中对图像进行投票。当用户将鼠标悬停在“gridItem”上时，我将隐藏一个覆盖层并显示另一个覆盖层，上面有两个按钮。为了让它在触摸设备上工作，我还添加了 :focus 伪类。

这在任何桌面浏览器中都可以正常工作，并且可以在触摸时使用。我现在面临的问题是，当我尝试单击“悬停”叠加层上的按钮时，此叠加层会在我得到点击事件之前消失。

这是一些 html 代码和我的 css 类：

    <div class="gridItem">
        <img class="..." src="..." alt="">
        <div class="likeLabelOverlay">
            small content
        </div>
        <div class="likeButtonOverlay ghost-center">
            <div>
                <h3>large content</span>
                <button type="button" id="..." class="btn btn-default">button 1</button>
                <button type="button" id="..." class="btn btn-default">button 2</button>
            </div>
        </div>
    </div>

我处理 gridItem 上的悬停：

.gridItem:hover .likeButtonOverlay, .gridItem:focus .likeButtonOverlay {
    display: block;
}

.gridItem:hover .likeLabelOverlay, .gridItem:focus .likeLabelOverlay {
    display: none;
}

Answer 1

移动设备上没有悬停。你可以做的是用 jquery on touch 绑定一些事件。

像这样：

$(document).ready(function() {
    $('.gridItem').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

CSS

.gridItem:hover, .gridItem.hover_effect {
    rule:properties;
}

Answer 2

移动设备支持:active。与您的:hover 一起使用:active。这里是demo。

.gridItem:hover .likeButtonOverlay, .gridItem:active .likeButtonOverlay {
    display: block;
}

.gridItem:hover .likeLabelOverlay, .gridItem:active .likeLabelOverlay {
    display: none;
}

<div class="gridItem">
        <img class="..." src="..." alt="">
        <div class="likeLabelOverlay">
            small content
        </div>
        <div class="likeButtonOverlay ghost-center">
            <div>
                <h3>large content</span>
                <button type="button" id="..." class="btn btn-default">button 1</button>
                <button type="button" id="..." class="btn btn-default">button 2</button>
            </div>
        </div>
    </div>

Answer 3

我们只需要为与我合作的代理机构的客户解决这个问题。

我还将在这里描述代码，以防万一小提琴发生任何事情，它会永久保存在这里。

---

小提琴

https://jsfiddle.net/GrafikMatthew/7nx53twL/

---

图书馆

我为此使用 2.2 jQuery 库，但我很确定如果需要可以使用早期版本。

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

---

CSS

这只是一个准系统演示，因此这些是此方法所需的最低样式。你可以根据你的页面设计来修改这些。

<style type="text/css">
  .nav-wrapper ul
  {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .nav-wrapper > ul::after
  {
    content: "";
    clear: both;
    display: block;
    float: none;
    height: 0;
  }
  .nav-wrapper > ul > li
  {
    display: block;
    float: left;
    padding: 10px;
    position: relative;
  }
  .subnav-wrapper
  {
    display: none;
    background: #000;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .subnav-wrapper > ul > li {
    padding: 10px;
  }
  .subnav-wrapper > ul > li > a
  {
    white-space: nowrap;
    color: #fff;
  }
  .nav-wrapper > ul > li:hover
  , .nav-wrapper > ul > li.hover
  {
    background: #000;
  }
  .nav-wrapper > ul > li:hover > a
  , .nav-wrapper > ul > li.hover > a
  {
    color: #fff;
  }
  .nav-wrapper > ul > li:hover > .subnav-wrapper
  , .nav-wrapper > ul > li.hover > .subnav-wrapper
  {
    display: block;
  }
</style>

---

HTML

我为这个菜单结构使用了一个相当直接的标记，尽管除了列表和锚点之外的所有内容，定位都是通过类名完成的，因此可以将元素替换为更适合您的项目的元素。

<div class="nav-wrapper">
  <ul class="nav">
    <li><a href="#link-a">Link A</a>
      <div class="subnav-wrapper">
        <ul class="subnav">
          <li><a href="#link-a-a">Sublink A A</a></li>
          <li><a href="#link-a-b">Sublink A B</a></li>
          <li><a href="#link-a-c">Sublink A C</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#link-b">Link B</a></li>
    <li><a href="#link-c">Link C</a>
      <div class="subnav-wrapper">
        <ul class="subnav">
          <li><a href="#link-c-a">Sublink C A</a></li>
          <li><a href="#link-c-b">Sublink C B</a></li>
          <li><a href="#link-c-c">Sublink C C</a></li>
        </ul>
      </div>
    </li>
    <li><a href="#link-d">Link D</a></li>
  </ul>
</div>
<hr />
<div class="dummy">
  <p>Dummy content...</p>
</div>

---

JS

我正在使用标准匿名外壳并通过$ 公开jQuery。

<script type="text/javascript">
  (function($){

    function MH_ResetAll() {
      $( '.nav-wrapper .hover' ).removeClass( 'hover' );
    }

    function MH_Init() {

      // >
      // > Environment
      // >
      $( document ).on( 'touchstart', function( e ) {
        MH_ResetAll();
      } );

      // >
      // > Primary Navigation
      // >
      $( '.nav-wrapper > ul > li > a' ).on( 'touchstart', function( e ) {

        // Cancel default event behaviors...
        e.preventDefault();
        e.stopPropagation();

        // Hook the important elements for this event...
        var ThisA = $( this );
        var ThisParentLI = $( ThisA.parents( 'li' ).get( 0 ) );

        // Is there a subnav-wrapper in the parent list item?
        if( ThisParentLI.find( '.subnav-wrapper').length ) {

          // Is the parent list item already hovered?
          if( ThisParentLI.hasClass( 'hover' ) ) {

            // Handle the event as a link click...
            window.location.href = ThisA.attr( 'href' );

          } else {

            // Reset all other hover states...
            MH_ResetAll();

            // Add the hover class to the parent list item...
            ThisParentLI.addClass( 'hover' );

          }

        } else {

            // Handle the event as a link click...
            window.location.href = ThisA.attr( 'href' );

        }

      } );

      // >
      // > Secondary Navigation
      // >
      $( '.subnav-wrapper' ).on( 'touchstart', function( e ) {

        // Prevent secondary navigation from bubbling up...
        e.stopPropagation();

      } );
      $( '.subnav-wrapper > ul > li > a' ).on( 'touchstart', function( e ) {

        // Cancel default event behaviors...
        e.preventDefault();
        e.stopPropagation();

        // Hook the important elements for this event...
        var ThisA = $( this );

        // Handle the event as a link click...
        window.location.href = ThisA.attr( 'href' );

      } );

    }

    $( document ).on( 'ready', function() {

      MH_Init();

    } );

  } )( jQuery );
</script>