html visible und hidden

Kyle · 20. Dezember 2012

hallo leute ,
ich möchte wissen wie man mit visibilty: hidden und visible sprich wenn der cursor über
mit hover über einem quadrat ist das der text erscheint ()

meine idee :
crusor über(Quadrat 50px 50px) (hover) und dann sollte background-color: #FFFFF sein und danach
sollte in diesem background-color (Quadrat 150px 350px) ein text da stehen , denn ich reinschreibe.

mfg kyle

//Rechtschreibfehler sind enthalten.
///bin dankbar wenn mir jemand helfen könnte oder ein code schreiben könnte , halt ein beispiel dazu :D.

LeijaT · 20. Dezember 2012

// style.css

#box { background-color : #123456; font-color : #654321; }
#box:hover { background-color : #654321; font-color : #123456; }

// html datei

Code

<div id='box'>Ich bin eine Divbox!</div>

Sollte reichen, die Spielerei kannst du natürlich nach deinen Vorstellungen variieren.

Longibotti · 20. Dezember 2012

@Vorposter: lies genauer.

Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<div id="namedeinesdivs">Hier der Inhalt deines DIVs, bevor mit der Maus drüber gefahren wurde.</div>


<script>
	$("div#namedeinesdivs").hover(function () {
	$(this).replaceWith("Hier dein Text");
	});
</script>
</body>
</html>

Alles anzeigen

EDIT:
Falls sich das DIV nur solange verändern soll, wie die Maus drüber ist

Code

<script>	$("div#namedeinesdivs").hover(function () {	$(this).replaceWith("Hier dein Text");	});	$("div#namedeinesdivs").mouseleave(function () {	$(this).replaceWith("Hier der Inhalt deines DIVs, bevor mit der Maus drüber gefahren wurde.");	});</script>

Code

Kyle · 20. Dezember 2012

Longibotti
ich werds mal ausprobieren

dein script funktoniert ürgendwie nicht !

Longibotti · 20. Dezember 2012

"Funktioniert nicht" ist keine präzise Beschreibung. Du kannst mir entweder mal deinen Code schicken, oder das Problem genauer beschreiben. Was funktioniert nicht? Was hast du probiert? Bei mir klappts

LeijaT · 20. Dezember 2012

Zitat von Kyle

dein script funktoniert ürgendwie nicht !

jQuery hast du aber schon installiert, oder?

Longibotti · 20. Dezember 2012

Kleine Anmerkung: das ".replaceWith" ist ungeeignet - mein Fehler Da passt ".text" besser.

Kyle · 20. Dezember 2012

bei .text wie mache ich den text wieder weg wenn ich mit dem crusor rausgehe =

Longibotti · 20. Dezember 2012

Zeig mal deinen Code

Kyle · 20. Dezember 2012

#menu_box1{
width: 50px;
height: 50px;
background: url(shadow.png) #E99F00;
position: relative;
border-radius: 5px;
font-size: 10pt;
}
#menu_box1:hover{
background: #FFFFFF;
width: 480px;
height: 270px;
border-style: solid;
border-color: #E99F00;
}

Longibotti · 20. Dezember 2012

Code

<script>
	$("div#menu_box1").mouseenter(function () {
	$(this).text("Hier dein Text");
	});

	$("div#menu_box1").mouseleave(function () {
	$(this).text(" ");
	});
</script>

Kyle · 20. Dezember 2012

danke funktoniert alles

mfg kyle

//könntest du mir noch sagen wie man in jquery ein bild einsetzt ?

Longibotti · 20. Dezember 2012

Uff ...

Code

<script>
	$("div#menu_box1").mouseenter(function () {
	document.getElementById("menu_box1").innerHTML = "Hier drinnen gehen auch Bilder mit normaler HTML Syntax (<img ...)";
	});

	$("div#menu_box1").mouseleave(function () {
	$(this).text(" ");
	});
</script>

Kyle · 20. Dezember 2012

wow fettes LOB danke !
;D Longibotti
ich dank dir , danke , danke , danke ,danke .

mfg kyle

breadfish.de 11. März 2022