Question

我有一个图片幻灯片，我想要点击所有部分：

<a href="/recruit.php">
<img src="img/Slide2.jpg" width="1000px" height="225px" alt="Slide 2"></a>
<div class="caption" style="bottom:0" >
    <p><a class="fill-div" href="/recruit.php">Apprenticeships – wide range available.</a></p>
</div>

根据HTML5中的谷歌，围绕<a> <div>的{{1}}是有效的HTML，但不应该有效。上面和下面显示的两个都不起作用：

<a href="/recruit.php">
<img src="img/Slide2.jpg" width="1000px" height="225px" alt="Slide 2"></a><a href="/recruit.php">
<div class="caption" style="bottom:0" >
    <p>Apprenticeships – wide range available.</p>
</div></a>

如何才能使文字或整个框可点击并转到链接？

Answer 1

<a href="/recruit.php" style="display:block; background-color:#ccc;">
  <img src="img/Slide2.jpg" width="1000px" height="225px" alt="Slide 2">
  <div class="caption" style="bottom:0" >
    <p>Apprenticeships – wide range available.</p>
  </div>
</a>

如您所述，这适用于我的Chrome。请注意您需要添加到display:block的{{1}}（或内联块）样式。

Answer 2

您可以在任何情况下使用pointer-events：

制作一个通常不可点击，可点击的元素（例如，行为类似真实按钮元素的div）
制作一个通常可点击的元素，而不是可点击的元素（例如，无法点击的锚点，就像它被禁用一样）
仍然可以访问非可点击元素（甚至是多个图层）中的嵌套可点击元素（即使在叠加层后面）

pointer-events

CanIUse

<强>段

＆＃13;

body {
  position: relative;
}
.clk {
  pointer-events: auto;
  cursor: pointer;
  border: 1px dashed blue;
  background: rgba(0, 0, 255, .3);
}
.clk:hover {
  background: rgba(0, 0, 255, 1);
  color: gold;
}
.not {
  pointer-events: none;
  border: 1px dashed red;
  background: rgba(255, 0, 0, .3);
}
.not:hover {
  background: rgba(255, 0, 0, 1);
  color: #ddd;
}
#pointB {
  position: absolute;
  bottom: -300px;
  left: 50%;
}
#pointA {
  position: absolute;
  top: 10px;
  left: 50vw;
}

＆＃13;

<a href="#pointB" class="clk" style="position: absolute">
  <div id="pointA" class="clk">pointA</div>
  <a>
    <br/>
    <br/>

    <p class="not">This demo shows how the CSS property, <code class="clk">pointer-events</code> can be used.</p>
    <dl class="not">
      <dt class="clk">Usage</dt>
      <dd class="not">Each element will either have the .clk or .not class.</dd>
      <dd class="not">An element with a red border belongs to the .not class.</dd>
      <dd class="clk">An element with a blue border belongs to the .clk class.</dd>
      <dt class="not">CSS</dt>
      <dd class="clk"><code class="not">.clk { pointer-events: auto; cursor: pointer; border: 1px dashed blue; background: rgba(0,0,255,.3); }</code>
      </dd>
      <dd class="not"><code class="clk">.not { pointer-events: none; border: 1px dashed red; background: rgba(255,0,0,.3); }</code>
      </dd>
    </dl>

    <section class="not">
      <div class="clk"></div>
      <span class="not">
    <a href="#pointA" class="clk">Click Here</a>
    </span>
    </section>
    <label class="not">Check This Box</label>
    <input type="checkbox" class="not">
    <label class="clk">Check This Box</label>
    <input type="checkbox" class="clk">
    <a href="#pointA" class="not">Click Here</a>
    <a href="#pointA" class="clk">Click Here</a>



    <a href="#pointA"><b id="pointB" class="clk">pointB</b></a>

＆＃13;

Answer 3

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Making all clickable</title>
  <style>
    #page{
    width: 100%;
	background: white;
	overflow: hidden;/*height: 1%;*/
	position:relative;
    }
    #page a{
      display:block;
      z-index:2;
      position:relative;
    }
   #page a.white-space-link{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:1;	
   }
  </style>
</head>
<body>
  <div id="page">
<a href="#">  <img src="img/Slide2.jpg" width="1000px" height="225px" alt="Slide 2"></a>
    <a class="white-space-link" href="#"></a>
  <a href="#"> <p>Apprenticeships – wide range available.</p> </a>   
  </div>
</body>
</html>

＆＃13;

检查，如果这是你想要的。制作所有链接，无论是图像还是文本，都将成为一个链接

Answer 4

我认为问题是你的问题。事实上，您的<a>可能不包含内部的所有元素：如果您制作overflow:hidden，则会看到<a>所涵盖的部分。

所以我建议您使用浏览器的检查器并使用css规则，以便<a>覆盖所有块。 <{1}}可能是display:inline-block的可能性。

Div可点击

4 个答案: