在 href 中嵌套 href

Question

在 href 中嵌套 href

5

我有一个可点击的面板，其中包含一个工具提示。代码如下：

<a href="/venues/manage/">
 <div class="col-md-4">
    <div class="panel panel-default">
     <img src="/img/venue.svg">
     <h5 class="text-vert crop"><b>Venue Title</b><a href="#" data-toggle="tooltip" title="Verified Venue">Verified</a></h5>
    </div>
 </div>
</a>
<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();
});
</script>

当我将鼠标悬停在工具提示文本上时，它可以正常工作。工具提示的某些内容会影响主链接<a href="/venues/manage/">。当我单击图像时，链接可以正常工作。当我单击文本Venue Title时，链接也可以正常工作。但是，如果我单击<div class="col-md-4">中的任何其他位置（例如文本右侧），链接将无法工作。

是否可能在另一个<a>中使用工具提示？

- Cellydy

1

不可以嵌套<a>标签和嵌套<p>标签。 - Mohammad Usman

你错了@MuhammadUsman，请等一下...我的答案。 - BENARD Patrick

1

不要对自己太有把握……等一下……请看一下，将第二个 'a' 用 object 标签包裹起来。 - BENARD Patrick

@pbenard 是的，我今天看到了一种可能性... 我以前从未使用过 object。 - Mohammad Usman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BENARD Patrick · Accepted Answer

为了实现嵌套的 a，请按以下步骤进行更改...

您需要将嵌套的 a 包含在 object 标签中。

<a href="/venues/manage/">
 <div class="col-md-4">
    <div class="panel panel-default">
     <img src="/img/venue.svg">
     <h5 class="text-vert crop">
         <b>Venue Title</b>
         <object><a href="#" data-toggle="tooltip" title="Verified Venue">Verified</a></object>
     </h5>
    </div>
 </div>
</a>

这里有一个 Bootply（查看生成的 HTML）：http://www.bootply.com/MmYwCLTF0P

这里是 Vitaly Friedman 的一场会议：https://vimeo.com/162334949