jQuery Mouseover Mousemove Div Container

[Dimenson]

Hallo,

Ich versuche gerade ein HTML Dokument zu erstellen. Wenn man über ein Bild mit der Maus darüber fährt soll neben dem Mauszeiger ein Div Container eingeblendet und verfolgt werden. Beim verlassen des Bildes soll allerdings der Div Container wieder ausgeblendet werden.

Hier ein HTML Auschnitt:

<style type="text/css">
.user_hover .hover {
    display: none;
    position: absolute;
    z-index: 2;
}
</style>
        <div class="user_hover">
        	<div class="hover">
                      <img src="user1_big.jpg" alt="user1" />
                </div>
        	<img src="user1.jpg" alt="user1" />
        </div>
        <div class="user_hover">
        	<div class="hover">
                      <img src="user2_big.jpg" alt="user2" />
                </div>
        	<img src="user2.jpg" alt="user2" />
        </div>

<script type="text/javascript">
 $(document).ready(function() {
$(function() {
    $(".user_hover").hover(

        function(e) {
            $(this).children("img").fadeTo(200, 0.85).end().children(".hover").show().css('top', e.pageY).css('left', e.pageX);
			$(this).children(".hover").mousemove(function(e){
				  $(this).css({'top': e.clientY - 10, 'left': e.clientX - 10});
			});			
        },
        function(e) {
			$(this).children(".hover").unbind('mousemove', setPos);
            $(this).children("img").fadeTo(200, 1).end().children(".hover").hide();
        });
});
});


</script>

Wenn ich nun mit der Mouse über das Bild drüber fahre, wird der Div Container eingeblendet und verfolgt auch die Maus, allerdings beim Verlassen der Bildes wird der Div Container nicht ausgeblendet.

Ich hoffe könnt mir weiterhelfen. Ich habe im Netz leider nichts passendes gefunden.
Bzw. da vieles auf English ist und mein English beschissen ist, verstehe ich auch so manches nicht.

Gruß

 

[soa]

Hallo,


geht z.B. so:

function hideTooltipp() {
	tipp.style.display = "none";
}

 

[Dimenson]

Moin,

ja leider komme ich so nicht weiter.

Vielleicht zum Verständnis:

Bei http://www.metalflirt.de/ sind user bilder abgebildet, wenn man dort mit der Maus darüber geht, wird wohl ein zusätzliches Div eingeblendet und beim Verlassen des Bildes wieder ausgeblendet.

Ich denke, das mit jQuery umzusetzen ist sinnvoll.

Ich denke, mein Ansatz ist gar nicht so verkehrt. Allerdings funktioniert es nicht ^^
Wenn einer ein Tip für mich hätte, immer her damit.

Oder kennt jemand bereits was Fertiges?

Danke

 

[Vvendetta]

Versuch es doch einfach einmal ohne .end()

 

[tombe]

Ist zwar ohne Bilder aber von der Funktion sollte es doch in etwa das sein wie du es haben willst:

<style type="text/css">
#div1
{
	border: 1px solid;
	background-color: #C0C0C0;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 0px;
	left: 0px;
}
#div2
{
	border: 1px solid;
	background-color: #444444;
	width: 200px;
	height: 200px;
	position: relative;
	top: 20px;
	left: 20px;
	display: none;
	z-index: 1;
}
</style>
<script language="javascript" type="text/javascript" src="../jquery/jquery-1.8.0.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
	$("#div1").hover(
		function(e) {
			$("#div2").css("display", "block");
		},
		function(e) {
			$("#div2").css("display", "none");
		}
	);
	$("#div1").mousemove(function(e) {
		$("#div2").css({'top': e.clientY + 10, 'left': e.clientX + 10});
	});
});
</script>

<div id="div1">DIV 1</div>
<div id="div2">DIV 2</div>