0

ツールチップに表示されるのと同様の矢印をdivに追加したいのですが、メインのdivに追加できる個別のクラスが必要です。これにより、左、右、上、下のいずれかの矢印がdivの中央に配置されます。

divの幅/高さに関係なく、矢印を中央に配置する必要があります。

これが私がこれまでに持っているものです: http://jsfiddle.net/hRMgk/1/

フィドルでの完全な CSS、HTML、および jQuery

<div id="theHover" class="therequest">
 <div class="noprint">
    <button  id="closetheHover">Close Window</button>
 </div>
        You need to start here on the website.
</div>
4

2 に答える 2

3

多くのアプリケーションで非常に頻繁に発生するチャットバブルの三角形について話していると思います...ここにあなたが興味を持っていると思うフィドルリンクがあります..これをcssに追加しました：

 #theHover.arrow::before
 {
content:'';
position:absolute;
left:50%;
top:100%;
border:12px solid black;
border-color:Blue transparent transparent transparent;
}
#theHover.arrow::after{
content:'';
position:absolute;
left:51%;
top:100%;
border:10px solid black;
 border-color:white transparent transparent transparent; 
}

これは基本的に、CSS の before content プロパティと after content プロパティを使用して行われます。このサイトから詳細情報を取得できます...

于 2013-01-12T19:21:54.107 に答える
0

ケリーさん、

css にコードを追加 (#hover)

    text-align:center;
    margin-top:auto;
    margin-bottom:auto;

このリンクを確認してくださいhttp://jsfiddle.net/hRMgk/18/

幸運を ！

于 2013-01-12T19:30:43.390 に答える