CSS + Jquery - How can I get this effect? (popup a div when mouse go over)
Im looking for doing somethings like this : open a div (with some data) when i go over some content with mouse.
You can see an example here : go over the small photo with mouse : you can see a div-popu开发者_如何转开发p that move within the mouse's position.
As suggested, this is possible with css+js(jquery. How can I do it? Is not so clear the JS file in the page, that's why i ask any helps :)
Cheers
The solution is quite simple. You need three things: an absolutely positioned div that's not nested in anything else (parent is <body>), a mousemove event handler to show the div and move it around, and a mouseleave handler to hide it.
With jQuery you can easily get the mouse coordinates from within any event handler: 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();
});
And you'll want this CSS:
#popup {
position: absolute;
width: 100px;
height: 100px;
background: #aaa; /* Just so you can see it */
}
Demo here: http://jsfiddle.net/yEeyV/
This works, but the positioning in your example is done with javascript I think.
<!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>
The div would have to be there, but invisible display:none
Through CSS you create a hover nested rule:
div.withdata:hover div.helper {display:block}
<div class="withdata"><img ...><div class="helper"></div></div>
Good Luck!
You can also use JQuery Tooltips : http://craigsworks.com/projects/qtip/
加载中,请稍侯......
精彩评论