0

アイコンがあり、その上にカーソルを合わせると、アイコンの右側にカスタム CSS ツールチップが表示されるようにしたいと考えています。ページを上下にスクロールするかどうかにかかわらず、ツールチップは常にアイコンの右側に表示される必要があります。

いいえ、プラグインは使いたくありません。仕事を終わらせるために、ちょっとした JS/CSS が欲しいだけです。JQuery を使用する場合は、v1.7 および JQuery-UI: v1.8 と互換性がある必要があります。

さらに、IE 6 および 7 と互換性がある必要があります。

要素を兄弟のままにしたいのですが、特定の状況下では、表示される div が子要素である必要があるように見えるため、HTML を変更する必要がある場合は問題ありません。

HTML:

<img src="" class="icon">ICON<img/>

<div class="demo">
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
</div>

CSS:

.demo {
    margin-left: 5px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: relative;
    border: 2px solid #333;
}

.demo:after, .demo:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}

.demo:after {
    border-width: 11px;
    border-right-color: #ccc;
    top: 13px;
}

.demo:before {
    border-width: 14px;
    border-right-color: #333;
    top: 10px;
}

実際の例: http://jsfiddle.net/49Js3/16/

4

2 に答える 2

1

ここでフィドル：http://jsfiddle.net/49Js3/29/

私は IE6 にアクセスできないので、合法かどうかはわかりません。IE7 以前の CSS でホバー動作を取得するには、アンカーが必要になることはわかっています。

そのため、画像の周りにアンカーを追加し、ツールチップを含める div も追加しました。

HTML

<div class="outer">
<a class="tippy" href="">
        <img src="" class="icon">ICON<img/>
   </a>

    <div class="demo">STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>
    </div>
</div>

CSS は次のとおりです。

.tippy {
    text-decoration: none;
}
.outer {
    width: 350px;
}
a.tippy:hover + div {
    display:block;
    float: right;
}
.demo {
    margin-left: 5px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: relative;
    border: 2px solid #333;
    display: none;
}
.demo:after, .demo:before {
    border: solid transparent;
    content:' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}
.demo:after {
    border-width: 11px;
    border-right-color: #ccc;
    top: 13px;
}
.demo:before {
    border-width: 14px;
    border-right-color: #333;
    top: 10px;
}
于 2013-09-24T20:19:35.357 に答える