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链接维度，以便它可以进行维护。

<强> UPD 即可。另外，<area>需要嵌套在<map>元素中，<map>需要与元素相关联，例如<img>或<object>。所以单独使用<area>并没有多大意义。您无法真正将<area>与页面上的任何HTML元素相关联。您可以在此处阅读有关图像地图元素的信息：http://www.w3.org/TR/REC-html40/struct/objects#h-13.6.1

<强> UPD 即可。如果我理解你的目标权利，你需要一个可以收集并且会触发工具提示出现的圆圈。遗憾的是，CSS :hover方法不适用于<area>元素，因为您无法在其中嵌套其他元素。所以你不能做这样的事情：

area:hover .tooltip { display:block }

所以，如果你想让真正的圆形对象可以运行，你需要使用SVG（和IE的VML＆lt; 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设置样式）。

Answer 2

你可以使用JS，使用JS很容易做到这一点，特别是使用jQuery

鼠标悬停事件无法执行

2 个答案: