html - 鼠标悬停事件执行失败

Question

我想在 HTML 代码中将鼠标悬停事件添加到形状
我声明 CSS 代码如下:

.tooltip {
  border-bottom: 1px dotted #000000; color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
.tooltip:hover span {
  border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute; left: 1em; top: 2em; z-index: 99;
  margin-left: 0; width: 250px;
}
.tooltip:hover img {
  border: 0; margin: -10px 0 0 -55px;
  float: left; position: absolute;
}
.tooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
  display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

我可以用这种方式运行鼠标悬停事件

<a class="tooltip" href="#"> ADD HERE 
  <span class="custom info"><img src="Info.png" alt="Information" height="50" width="50" />
    <em>Information</em>
    1-July-2011<br />
    Value: 255<br />
    Type=Startup<br />
    QA<br />
    QA
  </span>
</a> 

但是这样不行，我该如何解决呢？？

<a class="tooltip" href="#">
  <area shape="circle" coords="105,420,8" href="255.htm" /> 
  <span class="custom info">  
    <img src="Info.png" alt="Information" height="50" width="50" />
    <em>Information</em>
    1-July-2011<br />
    Value: 255<br />
    Type=Startup<br />
    QA<br />
    QA
  </span>
</a> 

Answer 1

问题一定是<area>元素不影响流程并且没有比例。这意味着您的工具提示没有文本(在您的示例中)甚至不能悬停，因为它没有尺寸(因为其中没有内容)。

http://jsfiddle.net/g8wYS/ – 您可以看到，在我添加文本后，工具提示开始出现。您需要提供 .tooltip 链接尺寸，以便它可以悬停。

更新。另外，<area>需要嵌套在 <map> 中元素，和 <map>需要关联一个元素，比如<img>或 <object> .所以使用 <area>一个人真的没有意义。你真的不能联想<area>页面上的任何 HTML 元素。您可以在此处阅读有关图像映射元素的信息:http://www.w3.org/TR/REC-html40/struct/objects#h-13.6.1

更新。如果我理解你的目标是正确的，你想要一个可以悬停并触发工具提示出现的圆圈。不幸的是，CSS :hover方法不适用于 <area>元素，因为您不能在其中嵌套其他元素。所以你不能做这样的事情:

area:hover .tooltip { display:block }

所以，如果你想让真正的圆形物体悬停，你需要使用 SVG(和 VML for IE < 9)，它也可能用 Canvas ，但我不是 100% 确定。为此，您可以使用简化 SVG 使用并允许使用 JavaScript 创建它的库之一——例如 http://raphaeljs.com/ – 你可以用那个库做这样的事情:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

circle.hover(function (event) {
    // position tooltip from the event objects mouse coordinates
}, function (event) {
    // hide tooltip
}, overScope, outScope);

但是，在我看来，您似乎可以只使用一个盒子，因为加载一个额外的库只是为了添加一个悬停效果可能是一个很大的开销。此外，您可以直接将 SVG 和 VML 直接写入您的代码，但我不会深入探讨这一点，您需要自己谷歌搜索(提示:SVG 不会太难，它会立即工作在所有现代浏览器中(FF、Chrome、Safari、Opera 和 IE9 及更高版本，并且可以使用 CSS 设置样式)。