Question

我们经常会遇到一个似乎被规范禁止的用例。

众所周知，HTML规范禁止嵌套超链接。与规范的大多数其他部分不同，这是一个很难的要求，因为浏览器会将新超链接的开头视为旧超链接的结尾。

为什么要使用嵌套超链接？ 如果像我一样，你喜欢你的HTML特别简洁，那么发现自己使用锚点作为块级元素来定义一个大的可点击区域并不罕见。大的可点击区域是出于可用性原因的好处：我确信我们一直都在那些令人尴尬的客户会议中，客户端试图在看起来像按钮的东西上徒劳地点击但是因为你的锚定义了文本级别而无法点击span，而不是周围的按钮外观父块。

。点击大而不是小事只会让事情变得更容易。

在我们的大型可点击式块中，设计者想要嵌套一些与父块相关但未映射到它的较小修饰符链接并不罕见。很好的例子是这样的“点击这里去或点击这里去（哪个东西是孩子的。”或更好：“点击这里去或点击这里的孩子”，如评论部分或其他内部锚“。

示例＃1：链接对象的子项

这里我们有一个典型的例子来说明嵌套锚点有用的原因。出于可用性原因，整张卡都是可点击的，并将用户带到链接的文章。它由一个块级锚点元素组成，其中包含主题框架的水平布局类。评论计数器符号（最左下角）必须将用户直接带到链接页面的#comments部分。

这是一个标记示例：

<a class="row" href="article.html">
    <img src="" class="col-4">
    <div class="col-2">
         <div class="category">Top stop</div>
         <h1>Article title</h1>
         <time>Date</time>
         <div class="desc">Article lead</div>
         <a class="commentbml" href="article.html#comments">2</a>
    </div>
</a>

鹰眼观察者会注意到浏览器会解释上面的HTML：

<a class="row" href="article.html">
    <img src="" class="col-4">
</a>
<div class="col-2">
    <div class="category">Top stop</div>
    <h1>Article title</h1>
    <time>Date</time>
     <div class="desc">Article lead</div>
    <a class="commentbml" href="article.html#comments">2</a>
 </div>

示例＃2：链接对象的类别

链接卡媒体框由在块级设置的单个外部元素组成。通过使卡的整个表面可点击，这有助于实现可用性。但是，NEWS链接右上角应该将用户带到该类别。除了提供快速导航帮助外，这与网站上文章类别主题的其他实例一致。

这是一个标记示例。

<a class="box" href="article.html">
    <a class="category" href="article-category.html">News</a>
    <img src="">
    <div class="caption">Article title</div>
</a>

同样，浏览器会像这样解释上述内容：

<a class="box" href="article.html"></a>
<a class="category" href="article-category.html">News</a>
<img src="">
<div class="caption">Article title</div>

因此。如果客户给你这个简短的说明，那么鉴于规范的不足，最好的方法是什么呢？

Answer 1

最简单的方法是单独使用HTML和CSS（因为您已经表示不愿意使用JavaScript）是模拟嵌套外观;简单地将包含<a>元素包装在外部容器（例如<div>）中，使用CSS将该容器定位到非静态属性值并定位“嵌套”＃39}。使用绝对定位的元素。

为此我将元素插入＆＃39; nest＆＃39;作为包含<a>元素的原始兄弟姐妹的相邻兄弟姐妹，给予：

<div class="item">
  <a href="http://stackoverflow.com">
Block-level link filling the enclosing &lt;div&gt; element, linking to Stack Overflow.
</a>
  <ul>
    <li><a href="http://stackoverflow.com/help" class="pseudoNested">Help center</a></li>
    <li><a href="http://stackoverflow.com/help/mcve" class="pseudoNested">MCVE</a></li>
    <li><a href="http://stackoverflow.com/company/about" class="pseudoNested">About SO</a></li>
  </ul>
</div>

以下（基本的，全部美学删除）CSS：

.item {
  /* a defined height to allow the child <a> element to
     fill the height of its parent, using 'height: 100%' */
  height: 10em;

  /* to allow descendants to be position in relation to this
     element, any value other than 'static' would suffice for
     this: */
  position: relative;
}

.item a {
  /* to horizontally fill its parent: */
  display: block;
  /* to vertically fill its parent: */
  height: 100%;
}

.item > a {
  padding-right: 10em;
}

.item ul {
  /* moving the element(s) out of the normal flow of
     of the document, and positioning according to
     its closest non-static ancestor: */
  position: absolute;

  /* adjust to taste: */
  top: 1em;
  right: 1em;
}

＆＃13;

.item {
  height: 10em;
  position: relative;
}
.item a {
  display: block;
  height: 100%;
}
.item > a {
  padding-right: 10em;
}
.item ul {
  position: absolute;
  top: 1em;
  right: 1em;
}

＆＃13;

<div class="item">
  <a href="http://stackoverflow.com">
Block-level link filling the enclosing &lt;div&gt; element, linking to Stack Overflow.
</a>
  <ul>
    <li><a href="http://stackoverflow.com/help" class="pseudoNested">Help center</a>
    </li>
    <li><a href="http://stackoverflow.com/help/mcve" class="pseudoNested">MCVE</a>
    </li>
    <li><a href="http://stackoverflow.com/company/about" class="pseudoNested">About SO</a>
    </li>
  </ul>
</div>

＆＃13;

随着一些基本美学的重新引入，这可以改进到以下内容，使事情更加明显：

＆＃13;

.item {
  background: transparent url(http://i.stack.imgur.com/KqZksl.jpg) center center no-repeat;
  height: 10em;
  position: relative;
  padding: 1em;
  background-color: #fff;
}
.item a {
  display: block;
  height: 100%;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.item > a {
  padding-right: 10em;
}
.item ul {
  position: absolute;
  top: 1em;
  right: 1em;
  min-width: 5em;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
.item ul li {
  background-color: rgba(0, 0, 0, 0.6);
  height: 1.5em;
  line-height: 1.5em;
  margin: 0 0 0.5em 0;
  border-radius: 0.5em;
  text-align: center;
  box-shadow: 0 0 0 0 transparent;
}
.item ul li:hover {
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0.5em 0 #fff;
}
.item a.pseudoNested {
  margin: 0.5em 0.25em;
}

＆＃13;

<div class="item">
  <a href="http://stackoverflow.com">
Block-level link filling the enclosing &lt;div&gt; element, linking to Stack Overflow.
</a>
  <ul>
    <li><a href="http://stackoverflow.com/help" class="pseudoNested">Help center</a>
    </li>
    <li><a href="http://stackoverflow.com/help/mcve" class="pseudoNested">MCVE</a>
    </li>
    <li><a href="http://stackoverflow.com/company/about" class="pseudoNested">About SO</a>
    </li>
  </ul>
</div>

＆＃13;

External JS Fiddle demo

搜索嵌套超链接：如何实现此效果？

1 个答案: