1

再利用可能なツールチップを作成したい。画像に続くスパンは表示されません。その上に移動すると、スパンが表示されます。しかし、うまくいきません。誰かアイデアがありますか？スパンは永久に表示されません。

HTML コード

<div>
    <div>Sharing</div>
    <img class="info-tooltip" src="system-help.png" alt="Info">
    <span>sdfmhdsjlfhsdljkqhfjkldsqfhljkqdshflsqd</span>
</div>

ccsコード

.info-tooltip + span{
    display: none;
}
.info-tooltip:hover + span{
    display:block;
    position:absolute;
    width: 105px;
    line-height:8px;
    top:10px;
    left:15px;
    background-color: #E9F2FF;
    padding:5px;
    font-size:10px;
    color:#444444;
    text-decoration:none;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    z-index:100040000;
}
4

1 に答える 1

0

画像を div タグで囲むようにしてください。

<div class="info-tooltip"><img src="system-help.png" alt="Info"></div>
于 2012-12-21T10:59:04.493 に答える