css - 使用 css bootstrap 禁用缩略图

Question

如何使用 Bootstrap 类禁用此缩略图:

<div class="row row-menu-s0s1">
   <div class="col-md-12 col-xs-12 thumb">
       <a class="thumbnail" href="<c:url value='/${area}/link'/>">
          <img class="img-responsive img-menu" src="<%=request.getContextPath()%>/resources/css/img/menu-box-02.jpg" alt="">
        </a>
    </div>
</div>

*澄清一下:由于某些原因，我希望我的页面中的某些缩略图被禁用。到目前为止，我一直在尝试添加 disabled类别为 <a> , div.thumb ，甚至 img .但是那行不通。链接仍然有效并且指针仍然显示我需要一些东西让用户知道这个缩略图不活动并停止链接工作。

*答案:虽然我最初的想法是淡化缩略图并将指针返回到正常光标。我从答案中意识到我可以只使用 css pointer-events: none;cursor: not-allowed;与组合 <a class=disabled>和一些 jquery:

$('a.disabled').click(function (e) {
  e.preventDefault();
});

虽然这可能只是一种解决方法，但并不是真正正确的方法。但我现在非常乐意接受任何可行的答案。

Answer 1

使用pointer-events: none;

.thumb a {
  pointer-events: none;
  cursor: not-allowed;
}