在悬停css上显示跨度

时间:2013-12-26 11:23:19

标签: html css hover

我在从画布上悬停显示跨度时遇到问题。 我在Stackoverflow上发现了很多文章,但我没有得到它。 :/

这是我的HTML:

<section id="graphs">
<span id="tooltip">thisistest</span>
<canvas id="myChart" class="tooltip" width="550" height="350"></canvas>
</section>

和这个css:

//This part works
span#tooltip {
    display: none;
    position: relative;
    top: 8px; 
    left: 10px;
    padding: 5px; 
    margin: 10px;
    z-index: 100;
    background: #333;
    border: 1px solid #c0c0c0;
    opacity: 0.8; 
    width: 300px;
    color: White;
    text-align: left;
}

//This does not show the span...
canvas.tooltip:hover #tooltip {
    display: block;
}

1 个答案:

答案 0 :(得分:4)

我很快就成了这个小提琴。 主要问题是你的:悬停声明。 在css第22行的小提琴中。

http://jsfiddle.net/robbiebardijn/hDbq3/

#graphs:hover #tooltip