Question

所以我现在有了这个结构：

<li>
 <div><hx></div>
 <a><img></a>
 <div><p></p></div>
</li>

我已经设置了所有的CSS并且一切看起来都不错，但是在最后一分钟我发现不仅仅是img，而且h和p也需要可点击。是否有一种简单的方法可以使整个li可点击，而不会干扰现有的CSS？可能就像一个幽灵元素，我可以将整个事物包裹起来？

Answer 1

有关如何使<li>和内容可点击的详细信息，请参阅下面的代码段。

<强>段

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Clickable</title>
<style>
li { list-style:none; }
a { text-decoration: none; }

</style>
</head>

<body>
<h3>Example 1</h3>
<h4>Wrap &lt;a&gt; around all of &lt;li&gt;'s content. <del>remove the extra &lt;div&gt;s</del>. Also add a `href="#"` to &lt;a&gt; even if you don't intend to have it jump to anywhere.</h4> 



  <li> 
  <a href="#">
      <h1>Without extra divs</h1>
 <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width="128"> 
 <p>Content of a paragraph</p>
 </a>
</li>

  <li> 
  <a href="#">
      <div><h1>With extra divs</h1></div>
 <img src="https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png" width="128"> 
 <div><p>Content of a paragraph</p></div>
 </a>
</li>


</body>
</html>

＆＃13;

Answer 2

定位在整个li上的锚点上的伪元素可以正常工作。

我已将该示例设为半透明红色，但简单opacity:0或background:rgba(0,0,0,0);也可以。

现在整个li都是可点击的，并链接到锚链接到的任何地方。没有额外的HTML或更改的HTML以及一些额外的CSS行。

ul {
  list-style-type: none;
}
li {
  border: 1px solid grey;
  /* for demo */
  position: relative;
  display: inline-block;
}
a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.25);
  /* for demo - should be transparent */
  z-index: 2;
}

<ul>
  <li>
    <div>
      <h1>My Heading</h1>
    </div>
    <a href="#">
      <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" alt="">
    </a>
    <div>
      <p>Lorem ipsum dolor.</p>
    </div>
  </li>
</ul>

如何使一个子元素（<div>和<div）clickable =“”with =“”a =“”sibling =“”<a =“”>包含在一个没有jQuery的<li>中

2 个答案: