Решение HREF в HREF? - PullRequest
Новая
       4

Решение HREF в HREF?

0 голосов
/ 28 февраля 2012

Я использую всплывающие подсказки CSS, которые должны быть заключены в "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>, а всплывающая подсказка вообще не работает.)

1 Ответ

2 голосов
/ 28 февраля 2012

Вы можете использовать селектор :hover для любого элемента, а не только для якорей:

HTML: 

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

Итак, в вашем CSS вы должны иметь: 

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

вместо: 

a:hover .tooltip {
  ...
}

и он должен работать так же.

...