私はマウスでいくつかのコンテンツを調べるときにdivを開きます。CSS + Jquery - どのようにこの効果を得ることができますか？ （マウスが上がったときにポップアップする）
例はhereです。マウスで小さな写真を見ると、マウスの位置内を移動するdivポップアップが表示されます。
示唆したように、これは（jqueryの。どのように私はそれを行うことができますCSS + JSで可能でしょうか？私は、任意のに役立ちます:)
乾杯
ソリューションは非常に簡単です。あなたは3つのものが必要です：絶対に配置されたdiv、他のものに入れ子になっていないdiv（親は<body>）、divを表示して移動するmousemoveイベントハンドラ、それを隠すためのmouseleaveハンドラが必要です。 jQueryを使って
あなたは簡単にマウスが任意のイベントハンドラ内から座標を取得することができますhttp://docs.jquery.com/Tutorials:Mouse_Position
// Get all elements you want a "popup" for
$(".popup")
// Attach a mousemove handler
.mousemove(function (e) {
// Is there a absolutely positioned popup div already?
// If not, create one and append to body
var $popup = $("#popup");
if (! $popup.length) {
$popup = $("<div id='popup'>").appendTo("body");
}
// Position the popup by mouse coordinates, and make sure it's shown
$popup.css({left: e.pageX + 20, top: e.pageY + 20}).show();
})
// Attach mouseleave handler to hide the popup
.mouseleave(function() {
$("#popup").hide();
});
そして、あなたはこのCSSをお勧めします：ここに
#popup {
position: absolute;
width: 100px;
height: 100px;
background: #aaa; /* Just so you can see it */
}
パーフェクト。これを試してみて、完璧に働いてください： – markzzz
divが存在しなければならないであろうが、CSSを通して見えないdisplay:none
あなたはホバーネストされたルールの作成：
div.withdata:hover div.helper {display:block}
<div class="withdata"><img ...><div class="helper"></div></div>
幸運を！
これはうまくいきますが、例の位置付けはjavascriptで行われています。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css" media="screen">
.popup{
display: none;
}
.small:hover .popup{
display: block;
}
</style>
</head>
<body>
<div class="small">
<div class="popup">
this is the popup
</div>
this is the trigger
</div>
<div class="small">
<div class="popup">
this is the 2nd popup
</div>
this is the 2nd trigger
</div>
</body>
</html>
また、jQueryのツールチップを使用することができます。http://craigsworks.com/projects/qtip/
ができ純粋なCSSで行うべきではないので、あなたの質問に 'javascript'タグを追加しました。 – Brad
ありがとうございました;）実際には私はそう思っていました... – markzzz
@Brad - 真実ではありません - CSSのみで行うことができますが、彼はtitle属性の追加と削除も行っているためjs probalbyを使用しています。 – easwee