Question

我使用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>

如您所见，我正在使用“The Tooltip”和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>换行的情况下进行了测试，然后工具提示根本不起作用。）

Answer 1

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

HTML：

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

所以在CSS中你会有：

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

而不是：

a:hover .tooltip {
  ...
}

它应该也一样。

解决href中的href？

1 个答案: