Question

我有一个带有快捷图标的bootstrap模式，代码可以在下面看到。问题是，每当我将鼠标悬停在其中一个图标上时，下面的图标会向下移动而实际HTML中没有明显的变化（通过浏览器检查器查看）

<!-- SHORTCUTS MODAL BEGINS -->
  <div id="shortcuts" class="reveal-modal" data-reveal aria-labelledby="shortcuts" aria-hidden="true" role="dialog">
      <div class="row">
          <div class="twelve columns">
              <h2 id="modalTitle">Shortcuts</h2>
          </div>
      </div>
      <div class="row list-icon">
        <div class="six columns">
            <i class="icon-tasks"></i><span class="label">Course</span> → [SHIFT] + [C]
        </div>
        <div class="six columns">
            <i class="icon-user"></i><span class="label">Profile</span> → [ALT] + [P]
        </div>
        <div class="six columns">
            <i class="icon-share"></i><span class="label">Shortcuts</span> → [SHIFT] + [?]
        </div>
        <div class="six columns">
            <i class="icon-home"></i><span class="label">Home</span> → [SHIFT] + [H]
        </div>
        <div class="six columns">
            <i class="icon-lock"></i><span class="label">Admin</span> → [SHIFT] + [A]
        </div>
        <div class="six columns">
            <i class="icon-laptop"></i><span class="label">Portfolio</span> → [SHIFT] + [P]
        </div>
        <div class="six columns">
            <i class="icon-envelope"></i><span class="label">Email</span> → [SHIFT] + [E]
        </div>
        <div class="six columns">
            <i class="icon-comment"></i><span class="label">Contact</span> → [SHIFT] + [K]
        </div>
      </div>
      <a class="close-reveal-modal"><i class="icon-remove"></i></a>
  </div> 
  <!-- SHORTCUTS MODAL ENDS -->

我一直在谷歌搜索这个问题一段时间无济于事。

如果我将鼠标悬停在“课程”上，则会显示问题的图片

每个图标类的css非常简单

.icon-tasks:before {
content: "\f0ae";
}

我尝试通过添加此类来禁用悬停，但它不起作用

.noHover{
    pointer-events: none;
}

Answer 1

如果有人遇到这个问题，我通过向整个Row添加指针事件：none来解决它，而不是每个按钮。

tl; dr我对CSS没用，这几乎没有问题。

如何阻止模态内的div移动鼠标悬停？

1 个答案: