要素の上にマウスを置くと、「Get Info」のようなテキストの小さなスニペットを表示したい

下のボタンがあり、CSSでスタイル設定されていて、htmlファイルのdivとして既に宣言されています。マウスをその上に置くと、小さなスニペットを表示したいと思います。 「情報を見る」要素の上にマウスを置くと、「Get Info」のようなテキストの小さなスニペットを表示したい

私はセレクタ#GetInfo :hover {を試しましたが、ボタンのスタイルと位置がすべて変更されました。

どうすればこの問題を解決できますか？

#GetInfo{ 

    cursor: pointer; 
    width: 33.2px; 
    height: 33.2px; 
    display: inine-block; 
    z-index:1; 
    position: absolute; 
    background-color: rgba(219 ,63,63,.5); 
    text-align: center; 
    font-size:23px; 
    color: white; 
    top:19px; 
    right:19px; 
}

出典

2017-01-04 Lira

私たちが問題のお手伝いをすることができますので、全体のコードを投稿してください。 – Ionut

divボタンの現在のテキストが変更されているか、 'title'属性のようなホバーテキストが必要なのでしょうか？ – Paul

[ツールチップをdivに追加する方法]（http://stackoverflow.com/questions/7117073/how-to-add-a-tooltip-to-a-div）の可能な複製 –

は何をしたいということですか？

#getInfo { 
 
    position: relative; 
 
    display: inline-block; 
 
    border-bottom: 1px dotted black; 
 
} 
 

 
#getInfo .yourTooltip { 
 
    visibility: hidden; 
 
    width: 120px; 
 
    background-color: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    border-radius: 6px; 
 
    padding: 5px 0; 
 
    position: absolute; 
 
    z-index: 1; 
 
    bottom: 125%; 
 
    left: 50%; 
 
    margin-left: -60px; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 

 
#getInfo .yourTooltip::after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    margin-left: -5px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    border-color: #555 transparent transparent transparent; 
 
} 
 

 
#getInfo:hover .yourTooltip { 
 
    visibility: visible; 
 
    opacity: 1; 
 
}

<html> 
 
<body> 
 
<h1>Pass your mouse over the text below</h1> 
 
<div id="getInfo">Your content goes here<span class="yourTooltip">Get info</span> 
 
</div> 
 
</body> 
 
</html>

出典

2017-01-04 16:01:58

ほとんどすべてのHTML要素にtitle属性があります。要素の上にカーソルを置いたときにテキストが表示されます。これを試してみてください：

<input type="button" value="Button" title="I wonder what this red button do ..." />

出典

2017-01-04 15:45:51 Taysumi

要素の上にマウスを置くと、「Get Info」のようなテキストの小さなスニペットを表示したい

答えて

関連する問題