0

アイコンの上にカーソルを置いたときに表示されるツールチップを作成しましたが、唯一の問題は、カーソルをたどっていないことです。そのため、時々動かなくなることがあります。

これが実際の例です：フィドル

ここに私のコード：

HTML

<a href="#" class="tooltip"><img src="http://i.imgur.com/JkhlPKF.png"><span>Equipment</span></a>
<a href="#" class="tooltip"><img src="http://i.imgur.com/lgHQamk.png"><span>Maps</span></a>

CSS

.tooltip {
    text-decoration:none;
    color: black;
    position: relative;
}
.tooltip:hover {
    text-decoration: none;
    cursor: default;
}
.tooltip span {
    display: none;
}
.tooltip:hover span {
    display: block;
    position: absolute;
    width: 80px;
    z-index: 100;
    background: #FFFFCC;
    text-align: center;
    border: 1px solid black;
    text-decoration: none;
}

CSS経由では不可能な場合、単純なJavaScriptで可能ですか（jQueryではなく、私が取り組んでいるプロジェクトではjQueryの使用が許可されていません）?

ありがとう。

4

1 に答える 1

0

純粋なCSSでは、ソリューションを作成することはほぼ不可能です。しかし、おそらくこれはあなたのためのものです: 説明タグの周りにラッパースパンを作成し、相対位置、z-index マイナス 1 (説明の z-index マイナス 1) のブロックとして表示します。そして、ラッパーをホバリングすると、説明がブロックとして表示されるというルールを追加します。 <a href="#" class="tooltip"><img src="http://i.imgur.com/JkhlPKF.png"><span class="wrapper"><span class="describe">Equipment</span></span></a>

私は（あなたのものに基づいて）例を作成しました：http://jsfiddle.net/T2YxQ/

于 2013-09-10T19:41:19.347 に答える