Html 鼠标悬停事件无法执行

我想在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> 

---

问题一定是

–您可以看到，在我添加文本后，工具提示开始出现。您需要给出.tooltip链接的尺寸，以便它可以悬停

UPD。另外，

UPD。如果我正确理解你的目标，你需要一个可以悬停的圆圈，并触发工具提示。不幸的是，CSS
：hover
方法不适用于
–您可以使用该库执行类似操作：

// 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进行样式设置）.
您可以使用JS，使用JS很容易做到这一点，特别是使用jQuery
请在HTML代码中添加一些换行符，这样阅读效果更好。如果您解释一下自己到底想做什么，或者做一些必要的悬停动作，这可能会有所帮助
// 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);