Question

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

我在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的影响？或类似的东西。

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

Answer 1

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

问题可能与您的工具提示配置和/或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

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

1 个答案: