基于图像的链接上的工具提示和自定义光标问题答案

【问题标题】：Issue with Tooltip and custom cursor on image-based links基于图像的链接上的工具提示和自定义光标问题
【发布时间】：2014-06-28 04:04:18
【问题描述】：

我的网页上有一张图片，可用于各种链接 - 您可以将鼠标悬停在图片上的按钮上，然后单击以转到另一个页面 - 但是当我第一次创建网页时，我在获取链接时遇到了问题正确的地方。

我在 CSS 中输入了图像，这是我遇到问题的地方。我通过在 HTML 中使用图像来解决它，然后使用 <map> 和 <area> 函数。像这样：

<img src="(my image url)" width="278" height="430" alt="tricorder" usemap="#tricorder">
<map name="tricorder">
<area shape="rect" coords="125,110,235,180" href="/" alt="home" title="home">
<area shape="circle" coords="92,120,9" href="{text:Alpha URL}" alt="link" title="{text:Alpha}">
<area shape="circle" coords="91,140,9" href="{text:Beta URL}" alt="link" title="{text:Beta}">
<area shape="circle" coords="89,160,9" href="{text:Gamma URL}" alt="link" title="{text:Gamma}">
<area shape="circle" coords="88,180,9" href="{text:Delta URL}" alt="link" title="{text:Delta}">
<area shape="circle" coords="83,216,20" href="{text:Library URL}" alt="navi" title="{text:Library}">

可能有一种更简单的方法，但我对一切都很陌生，而且效果很好。

现在的问题是我已经在 CSS 中安装了 Tooltip 和自定义光标。这些对网页的其余部分工作正常，但我的自定义工具提示设置（白色文本、黑色背景等）和我的自定义光标（悬停在链接上时没有手）在悬停在图像链接上时不起作用。

我只能假设这是因为我的图像不受 CSS 影响？或类似的东西。

如果您需要更多信息，我会尽力澄清，但这是最后一点，以使其完美，如果有人可以提供帮助，我将不胜感激..

【问题讨论】：

标签： html css image cursor tooltip

【解决方案1】：

看这里http://jqueryui.com/tooltip/#custom-style。

问题可能与您的工具提示配置和/或 CSS 样式有关。我将您的上述代码与以下 CSS 一起使用并正确呈现。

.custom-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
}
.custom-tooltip {color:white;}

还有下面的JS：

$( document ).tooltip({ tooltipClass:"custom-tooltip", 
    position: {my:"left+5 center", at:"right center"} });

JSFiddle example

【讨论】：