21

私はこれを何度も試みましたが、まだうまくいきませんでした。

このテキストの上にマウスを置くと

ここに画像の説明を入力してください

次に、このボックスを表示する必要があります

ここに画像の説明を入力してください

誰かがこれを行うことができれば、私は純粋にCSSでこの効果を達成したいと思います。

4

5 に答える 5

48

あなたはこのように書くことができます：

CSS

span{
    background: none repeat scroll 0 0 #F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 30px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display:none;
    padding:0 20px;

}
span:after{
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
p{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
}

p:hover span{
    display:block;
}

HTML

<p>Hover here<span>some text here ?</span></p>

これをチェックしてください http://jsfiddle.net/UNs9J/1/

于 2012-04-20T09:33:27.673 に答える
3

このCSSツールチップは簡単なコードで簡単に作成できます：-

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
a.info{
    position:relative; /*this is the key*/
    color:#000;
    top:100px;
    left:50px;
    text-decoration:none;
    text-align:center;
  }



a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:-60px;
    width:15em;
    border:5px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center;
    padding:10px;
  }

  a.info:hover span:after{ /*the span will display just on :hover state*/
    content:'';
    position:absolute;
    bottom:-11px;
    width:10px;
    height:10px;
    border-bottom:5px solid #0cf;
    border-right:5px solid #0cf;
    background:#cff;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
  }


</style>
</head>
<body>
<a href="#" class="info">Shailender Arora <span>TOOLTIP</span></a>
  </div>
</body>
</html>

http://jsbin.com/ebucoz/25/edit

于 2012-04-20T09:44:25.150 に答える
2

また、display：block on hoverとdisplay：noneをホバーなしで切り替えて、効果を出すこともできます。

于 2012-04-20T09:29:57.103 に答える
1

これは他の答えの小さな調整です。ネストされたdivがある場合は、ポップアップにH1などのよりエキサイティングなコンテンツを含めることができます。

CSS

div.appear {
    width: 250px; 
    border: #000 2px solid;
    background:#F8F8F8;
    position: relative;
    top: 5px;
    left:15px;
    display:none;
    padding: 0 20px 20px 20px;
    z-index: 1000000;
}
div.hover  {
    cursor:pointer;
    width: 5px;
}
div.hover:hover div.appear {
    display:block;
}

HTML

<div class="hover">
<img src="questionmark.png"/>
    <div class="appear">
       <h1>My popup</h1>Hitherto and whenceforth.
    </div>
</div>

これらの解決策の問題は、ポップアップが表示されたときにページ内のこの後のすべてがシフトされることです。つまり、ページの残りの部分が「スペースを作る」ために下にジャンプします。これを修正できる唯一の方法は、position：absoluteを作成し、上部と左側のCSSタグを削除することでした。

于 2013-09-05T15:20:15.737 に答える
1

まさに彼らが言ったこと、それはうまくいくでしょう。

親要素で最大高さを設定します。

私はsandeepの例を取り、max-heightを追加しています。必要に応じて、max-widthプロパティを追加できます。テキストは本来あるべき場所にとどまります（可能であれば、そこにとどまるようにいくつかの値を変更する必要があります）

span{
    background: none repeat scroll 0 0 #F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 30px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display:none;
    padding:0 20px;
}

span:after{
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
     transform:rotate(45deg);
}

p{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
    max-height: 10px;
}

p:hover span{
    display:block;
}

p段落のmax-height、最後から2番目、最後の行。

役に立たないと評価する前にテストしてください。

于 2015-07-19T22:25:36.387 に答える