• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

onmouseover css wert ändern

J

jumbo125

Mitglied
sehr geehrte Users,

leider kenne ich mich nur sehr wenig/kaum mit javascript aus. Ich hätte jedoch folgendes Problem:

so wäre es geplant:

Auf meiner Homepage befindet sich ein <div> container, welcher mittels css ein Bild enthält. der gesamte weitere Inhalt ist mittels einer css-klasse ausgeblendet. Nun mwürde ich gerne, diese classe ändern, sobald jemand mit der Maus über dieses Bild fährt.

Code: 
css:
.bild {
background-image: url(...);
width: ..;
height: ...;
left: ...;
position: fixed;
}

#allesfehlt{
display:none;
}

/*css Ende */

HTML:
...
<body>
<div class="bild">hier könnte man einen Rhamen oder etwas in der art gestalten, falls es von nöten wäre....</div>
<div id="allesfehlt">
fehlt
fehlt
fehlt
etc..
</div>

</body>

Das js script müsste:
1. den Wert display:none, auf display:block legen, sobald man mit der Maus über das Bild fährt,
UND
2. Das javascript müsste das Bild/ bzw. den Div-Container mit dem Bild löschen. Damit nur mehr der ausgeblendete Text zu sehen ist.

ist das machbar???

bin über jede Antwort äußerst dankbar
 
Das kannst du ohne javascript lösen, css reicht eigentlich. Etwa(!) so:
Code: 
.bild {
  background-image: url(...);
  width: ..;
  height: ...;
  left: ...;
  position: fixed;
}
.bild:hover {
  display:none;
}
 
Sollte mit jQuery etwa so funktionieren. Einfach mal googeln.

Code: 
[COLOR=#000000]$[/COLOR][COLOR=#666600]([/COLOR][COLOR=#008800]".bild"[/COLOR][COLOR=#666600]).[/COLOR][COLOR=#000000]hover[/COLOR][COLOR=#666600]([/COLOR][COLOR=#000000]
  [/COLOR][COLOR=#000088]function[/COLOR][COLOR=#666600]()[/COLOR][COLOR=#666600]{[/COLOR][COLOR=#000000]
    $[/COLOR][COLOR=#666600]([/COLOR][COLOR=#000088]this[/COLOR][COLOR=#666600]).[/COLOR][COLOR=#000000]hide();
[/COLOR][COLOR=#000000]    $[/COLOR][COLOR=#666600]([/COLOR][COLOR=#000088]"#allesfehlt"[/COLOR][COLOR=#666600]).[/COLOR][COLOR=#000000]show();[/COLOR][COLOR=#000000]
  [/COLOR][COLOR=#666600]},[/COLOR][COLOR=#000000] 
  [/COLOR][COLOR=#000088]function[/COLOR][COLOR=#666600]()[/COLOR][COLOR=#666600]{[/COLOR][COLOR=#000000]
    [/COLOR][COLOR=#000000]$[/COLOR][COLOR=#666600]([/COLOR][COLOR=#000088]".bild"[/COLOR][COLOR=#666600]).[/COLOR][COLOR=#000000]show();
[/COLOR][COLOR=#000000]    $[/COLOR][COLOR=#666600]([/COLOR][COLOR=#000088]"#allesfehlt"[/COLOR][COLOR=#666600]).[/COLOR][COLOR=#000000]hide();[/COLOR][COLOR=#000000]
  [/COLOR][COLOR=#666600]}[/COLOR][COLOR=#000000]
[/COLOR][COLOR=#666600]);[/COLOR]
 
Geht ohne js, denke ich. Nimm ein Div (im Beispiel #aussen) und pack für jeden zustand ein Div (#div1, #div2) rein. Und dann:
Code: 
#aussen #div1 {
  visibility:visible; /* Div1, im Normalzustand sichtbar */
}
#aussen #div2 {
  visibility:hidden; /* Div2, im Normalzustand unsichtbar */
}
#aussen:hover #div1 {
  visibility:hidden; /* Div1, bei Mouseover unsichtbar */
}
#aussen:hover #div2 {
  visibility:visible; /* Div2, bei Mouseover sichtbar */
}
 
Danke für die vielen Antworten. Habs nun so gelöst:
Code: 
<style type="text/css">#Absatz {
display:none;
}


#text {
display: block;
}


</style>
<script type="text/javascript">
function Test () {
document.getElementById("Absatz").style.display = "block";
document.getElementById("text").style.display = "none";
}
</script>
</head><body>
<p id="Absatz">Ein Text</p>
<p id="text" onMouseover="Test();">Test</p>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben