Hey,
Ich würde gerne einem Objekt die Anweisung geben, dass sobald man darüber hovert ein anderes Objekt die Opacity auf 0 setzt.
Ich hoffe ihr versteht was ich meine.
Danke im Voraus !
Hey,
Ich würde gerne einem Objekt die Anweisung geben, dass sobald man darüber hovert ein anderes Objekt die Opacity auf 0 setzt.
Ich hoffe ihr versteht was ich meine.
Danke im Voraus !
Hallo Aventrux,
ich glaube nicht, dass das allein mit css funktioniert.
Aber so müsste es funktionieren:
<!-- Dein Objekt in HTML. Als Beispiel ein Button -->
<input type="button" id="obj_1"/>
<!-- Dein zweites Objekt -->
<div id="obj_2">
<input type="button"/>
</div>
document.getElementById('obj_1').addEventListener('mouseover', set_obj2_Opacity_to_0);
document.getElementById('obj_1').addEventListener('mouseout', set_obj2_Opacity_to_1);
function set_obj2_Opacity_to_0()
{
document.getElementById('obj_2').innerHTML = '<input type="button" style="Opacity: 0;"/>';
}
function set_obj2_Opacity_to_1()
{
document.getElementById('obj_2').innerHTML = '<input type="button" style="Opacity: 1;"/>';
}
Mit freundlichen Grüßen
Justus
Das geht relativ leicht auch mit CSS aber mit Einschränkungen bzgl. der Anordnung:
Es gibt aber auch einen Vorteil: Mit CSS-Transition oder -Animation können viele Eigenschaften einfach animiert werden.
Hey,
Danke für eure Antworten, leider krieg ich es nicht hin das ganze richtig umzusetzen, vielleicht könnt ihr mir da ja noch mal helfen.
Ich beschreibe noch mal mit einem Beispiel Code was ich machen möchte:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="obj_1">
</div>
<div class="obj_2">
</div>
</body>
</html>
Alles anzeigen
CSS:
.obj_1 {
width: 30px;
height: 30px;
background-color: blue;
}
.obj_2 {
width: 30px;
height: 40px:
margin: 30px;
background-color: green;
}
Alles anzeigen
Wenn man nun über obj_1 hovert, soll die opacity von obj_2 auf 0 gesetzt werden. Verlässt man obj_1 mit dem Mauszeiger wieder soll die opacity von obj_2 wieder auf 1 gesetzt werden.
Ich hoffe ihr versteht was ich meine, und würde mich sehr über weitere Antworten freuen.
1. Du hast da zwei Mal das Semikolon vergessen: In Zeile 3 und in Zeile 9.
2. Damit das Hover funktioniert, kannst Du mein CSS aus #3 fast 1-zu-1 übernehmen, nur verwendest Du jetzt Klassen und musst daher die # durch Punkte ersetzen:
Danke, jetzt klappt alles!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.