jQuery mouseover auf Body-Tag

G

GottiRhg

Mitglied
Hallo zusammen,
ich habe ein kleines Problem.
Ich brauche eine Mouseover Funktion für verschiedene Div-Container und zusätzlich, wenn ich nicht über einem Div bin auf dem Body-Tag.

Soweit funktioniert auch alles.
Einziges Problem:
Wenn ich den Mouseover für den Body-Tag anlege, funktionieren die Mouseover der Div-Container nicht mehr. Bedeutet: Das Mouseover des Body-Tags überschreibt sozusagen alle Mouseover der Div's. Ist soweit auch logisch, da der Body natürlich übergeordnet ist. Gibt es dennoch einen Weg, wie man es hinbekommt?
 
Hi,

was ist wenn du nen div container anlegst der über den kompletten Body tag geht und die einzelnen div container drüberlegst?

Entweder anordnen mit z-index oder mit position absolute für die einzelen Container?
 
So lange du über einem DIV bist, hast du dort das onmouseover-Ereignis. So bald die Maus den Bereich des DIVs verlässt, kannst du das onmouseout-Ereignis nehmen.

NACHTRAG: Es gibt bestimmt schönere Beispiele aber es funktioniert.

HTML: 
<script language="javascript" type="text/javascript">
var pos = 0;
function move_d() {
	pos = 1;
	document.title = "Ich bin über einem DIV";
}
function move_b() {
	if (pos == 1) return false;
	document.title = "Ich bin über dem BODY";
}
</script>

<style type="text/css">
div
	{
	width: 300px;
	height: 50px;
	border-style: solid;
	border-width: 1px;
	}
</style>
<body onmousemove="move_b();">
	<div>DIV ohne mousemove</div>
	<div onmousemove="move_d();" onmouseout="javascript: pos=0;">div 1</div>
	<div>DIV ohne mousemove</div>
	<div onmousemove="move_d();" onmouseout="javascript: pos=0;">div 2</div>
	<div>DIV ohne mousemove</div>
	<div onmousemove="move_d();" onmouseout="javascript: pos=0;">div 3</div>
	<div>DIV ohne mousemove</div>
	<div onmousemove="move_d();" onmouseout="javascript: pos=0;">div 4</div>
</body>

Die Variable pos bekommt den Wert 1 so bald man innerhalb eines DIVs ist. Dadurch wird die Funktion für body sofort wieder verlassen ohne das was passiert. Beim Verlassen des DIVs wird pos = 0 gesetzt und dadurch die Funktion für den body wieder ausgeführt.
 
Zuletzt bearbeitet:
Danke tombe für deine Antwort.
Gibt es mit jQuery eine schlankere Lösung?
Ein übergeordneter DIV scheint nicht zu funktionieren.

Hintergrund: Ich nehme anschließend mit jQuery einige CSS Änderungen etc. vor. Daher würde ich gerne bei jQuery bleiben.
 
Zuletzt bearbeitet:
Um ehrlich zu sein ich habe noch nie was mit jQuery gemacht, deshalb bin ich mir nicht sicher ob das alles so richtig ist. Zumindest scheint es aber zu funktionieren:


Javascript: 
var pos = 0;

$(document).ready(function(){

	$("body").mouseover(function(){
		if (pos == 1) return false;
		document.title = ("Ich bin im BODY");
	});

	$("div").mouseover(function(){
		pos = 1;
		document.title = ("Ich bin im DIV");
		});

	$("div").mouseout(function(){
		pos = 0;
    	});

});

Was meinst du mit "Ein übergeordneter DIV scheint nicht zu funktionieren."?
 
Das hat mir schon geholfen. Danke!
Nun habe ich allerdings ein weiteres Problem.
Wie verbinde ich denn Mouseover mit einem Click Event?

Anwendungsfall:
Ich möchte, wenn ich mit der Maus über einem Element bin, das CSS verändern. Wenn ich aber nun klicke, sollen CSS Werte des Elements in einem Input landen. Irgendwie sind die CSS Werte aber immer leer, wenn ich folgendes nehme:
Code: 
alert(jQuery(this).css('padding'));

padding bei dem Element ist allerdings 5px.
 
So wie es aussieht kannst du das so nicht lösen, da scheinbar nicht alls CSS Werte ausgelesen werden können. Hier steht so einiges dazu geschrieben.

Die CSS Werte verändern dagegen geht wohl immer!?

NACHTRAG: Ich müsste doch mal wieder mein Englisch auffrischen, dann würde ich auch verstehen was da so geschrieben wird.

Man kann also doch alle Angaben mit jQuery auslesen, einzig die "Shorthand CSS properties (e.g. margin, background, border) are not supported."

padding - geht nicht
padding-top, padding-left, ... - geht

border - geht nicht
border-left, border-top, border-style, ... - geht
 
Zuletzt bearbeitet:
Danke tombe. Das ist es...

Allerdings:
Im folgenden Code wird das Alert-Event beim Click-Event doppelt ausgeführt. Dadurch ist das padding-left beim 1.mal gefüllt und beim 2.mal nicht mehr. Muss ich hier ein unbind o.ä. einbauen?

Code: 
var pos = 0;
jQuery(document).ready(function() {
	jQuery( "#element-picker" ).draggable();
	
	jQuery( ".editable" ).mouseover(function(){
    /* CSS */
		jQuery( "#element-picker-element" ).val(jQuery(this).attr('id'));
		jQuery(this).css('background','none repeat scroll 0 0 #000000');
		jQuery(this).css('border','1px dashed #FF0000');
		jQuery(this).css('opacity','0.3');
		jQuery(this).css('color','#FF0000');	
		
  }).mouseout(function(){
    if(jQuery(this).attr('id') == jQuery( "#element-picker-hidden-element" ).val()){
			/* CSS anderer Elemente leeren */
			jQuery( "#element-picker-element" ).val("");
			jQuery( "body" ).find( ".editable" ).css('background','none');
			jQuery( "body" ).find( ".editable" ).css('border','none');
			jQuery( "body" ).find( ".editable" ).css('opacity','1.0');
			jQuery( "body" ).find( ".editable" ).css('color','inherit');			
			
			/* Elemente in Element-Picker laden */
			jQuery( "#element-picker-element" ).val(jQuery(this).attr('id'));
			jQuery(this).css('background','none repeat scroll 0 0 #000000');
			jQuery(this).css('border','1px dashed #FF0000');
			jQuery(this).css('opacity','0.3');
			jQuery(this).css('color','#FF0000');	
		
		}else{
			/* CSS leeren */
			jQuery( "#element-picker-element" ).val("");
			jQuery(this).css('background','none');
			jQuery(this).css('border','none');
			jQuery(this).css('opacity','1.0');
			jQuery(this).css('color','inherit');
		}
  });	
		
	jQuery( ".editable" ).click(function(){
		jQuery( "#element-picker-hidden-element" ).val(jQuery(this).attr('id'));
		
		if(jQuery(this).css('padding-left').length > 0){
			alert(jQuery(this).css('padding-left')); <-- !! Wird 2mal ausgeführt !!
			jQuery( "#element-picker-padding" ).val(jQuery(this).css('padding-left'));
		} else {
			jQuery( "#element-picker-padding" ).val("0");
		}
		
	});	
	
});
 
Kannst du vielleicht mal die komplette Datei als ZIP hier einstellen?
Alleine mit dem Code finde ich jetzt auch keine Lösung aber wenn man es "live" sieht ist es vielleicht einfacher nachzuvollziehen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück