防止使用css点击链接包装

Prevent click on link wrapper using css

本文关键字：链接 包装 css      更新时间：2023-09-26

我有一个链接，里面有图像。所有的构造都封装在一些div中。问题：除了图片，还有div包装器的可点击区域。我不知道为什么这是可能的。所以我想阻止这种行为。现在，我只需要使用javascript（在div单击时返回false）和css（在div悬停时更改curson类型）就可以做到这一点。

我可以用css来完成吗？谢谢

    <div class="panel-body">
        <div id="home-left" class="col-md-6 text-center">
            <div style="white-space: nowrap">
                <a href="#">
                    <img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
                <br/>
                <h4>Rating Categories</h4>
            </div>
        </div>
    </div>

JsFiddle示例

对于那些不知道我在问什么的人：我想制作受图像两侧限制的可点击区域。现在我可以点击div，它们是要通过链接重定向的图像的包装器。

由于您使用的是Bootstrap，img响应类使图像成为块元素，因此需要更改该行为。块元素占据其父容器的整个宽度。你可以通过使图像成为一个内联元素来解决这个问题：

img.img-responsive {
    display:inline;
}

jsFiddle示例

或者就是不要使用img响应类。

指针事件：none

是的，你可以使用CSS：）
指针事件：无；

<div class="panel-body">
  <div id="home-left" class="col-md-6 text-center">
    <div style="white-space: nowrap" class='no-link'>
      <a href="#">
        <img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/>
      </a><br/>
      <h4>Rating Categories</h4>
    </div>
  </div>
</div>
<style>
  .no-link{
   
  }
</style>

基于jsFiddle示例，只需将您的代码更改为：

<div style="white-space: nowrap; width:200px; margin: auto;">

"副作用"的原因是您的ATAG占用了所有父DIV区域，因此DIV本身占用了其自己父的整个空间，使可点击区域看起来超出了ATAG（这不是真的）。

为了防止这种行为，最好将容器的大小限制为容器内可点击元素的大小（必要时宽度和高度）。

祝你编码愉快！：）

您应该使用display:inline块；并设置包含分区的宽度

<div class="panel-body">
  <div id="home-left" class="col-md-6 text-center" style="width: 100%; margin-left:auto; margin-right: auto;">
    <div style="white-space: nowrap; display: inline-block; width: 200px;">
      <a href="#">
        <img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0" />
      </a>
      <br/>
      <h4>Rating Categories</h4>
    </div>
  </div>
</div>

只在div中添加相同的边距和宽度--示例

    <div class="panel-body">
        <div id="home-left" class="col-md-6 text-center">
            <div style="white-space: nowrap;margin: 0 auto; width: 200px;">
                <a href="#">
                    <img src="http://news.bbcimg.co.uk/media/images/71832000/jpg/_71832498_71825880.jpg" class="img-responsive" style="margin: 0 auto;width:200px;" border="0"/></a>
                <br/>
                <h4>Rating Categories</h4>
            </div>
        </div>
    </div>
相关文章：