解决href中的href？答案

【问题标题】：Solution to a href within a href?解决href中的href？
【发布时间】：2012-03-17 11:11:10
【问题描述】：

我使用的 CSS 工具提示必须包含在“a href”中才能起作用。

<a href="#">
<img src="http://www.url.com/image.png" alt="" width="20" height="20" />
<span class="tooltip center white">
<img src=" http://www.url.com/image.png" alt="" width="80" height="80" />iPad [add_to_cart_anchor item="ipad"]purchase the iPad[/add_to_cart_anchor] </span>
</a>

如您所见，我使用的是“工具提示”和 Cart66（使用锚短代码）。

输出如下：

<a href="#">
<img width="20" height="20" alt="" src="http://www.url.com/image.png"/>
<span class="tooltip center white">
<img width="80" height="80" alt="" src=" http://www.url.com/image.png"/>iPad </span>
</a>
<a href="http://www.url.com/cart?task=add-to-cart-anchor&amp;cart66ItemId=1">purchase the iPad</a>

问题是“购买 iPad”是一个包含在代码中的 href 中的 href，因此它被丢弃在工具提示之外。我该如何解决这个问题，以便“购买...”链接仍然在范围内，因此工具提示，同时仍然允许工具提示工作？（我在没有 <a> 包装的情况下进行了测试，然后工具提示根本不起作用。）

【问题讨论】：

我可以有css标签吗？所以我可以创建 html 文件并进行处理？
CSS 在这里：pastebin.com/dh4kFbQg（注意：您可以使用 applegreen 替换上面代码中的白色）
我认为这里真正的解决方案是首先不要滥用<a> 与这样的工具提示一起使用。
@AndrewMarshall：有没有办法在仍然使用这个工具提示的同时解决这个问题，因为我已经在整个站点范围内实现了它！ ://
根据 w3c，使用嵌套的 href 是“非法的”...我高度怀疑你能否破解它来工作。

标签： html css href

【解决方案1】：

您可以将:hover 选择器用于任何元素，而不仅仅是锚点：

HTML：

<span class="tooltipwrapper">
  ...
</span>

所以在你的 CSS 中你会：

span.tooltipwrapper:hover .tooltip {
  ...
}

代替：

a:hover .tooltip {
  ...
}

它应该工作相同。

【讨论】：

谢谢@juanrpozo！工作出色。