html/css kann ich bei hover bei einem Element ein anderes veränder?

2 Antworten

.classname:hover ~ .classname {
    background-color: #F00;
}

Aber das funktioniert nur bei allen Geschwistern der Klasse die nach dem gehovertem Element kommen.

Ansonsten hilft nur Javascript:

var e = document.getElementsByClassName("classname");
var n = e.length;
function farbe(color) {
for(var i = 0; i < n; i ++) {
e[i].style.backgroundColor = color;
}
}
for(var i = 0; i < n; i ++) {
e[i].onmouseover = function() {
farbe("yellow");
};
e[i].onmouseout = function() {
farbe("black");
};
}

Das schreibt alle Elemente einer Klasse in ein Array, geht das durch und setzt die onmousover()-Funktion. Die wird dann aufgerufen wenn einer mit der Maus drüber fährt. Diese Funktion ist in dem Fall "farbe()". Und "farbe()" macht alle Elemente gelb.. bei mouseout(), also Maus runterbewegen, wird alles wieder schwarz gemacht.



Klassen können Geschwister haben? das wusste ich glaub cih noch nicht. kannst du kurz und knapp erklären wie das ist?

danke schonmal

0
@Zhalia

Alle Elemente der selben Klasse sind Geschwister. Vererbende oder abstrakte Klassen sind Eltern. Und Alle Klassen die etwas erben oder eine abstrakte Überklasse haben, sind Kinder.

Aber in CSS ist das net so dramatisch... war jetzt Exkurs in objektorientierte Programmierung :)

Also einfach alles was die gleiche Klasse hat...

0
@Elmo2999

achso okay ;)

mmh aber damti komm ich glaub cih nicht weiter ich guck nochmal.

weil das mit  dem Javascript sollen wir meine cih nicht benutzen.

ich schau mir das ncohmal mit der classe an vielleicht finde ich da ja einen weg. also vielen Danke

0
@Zhalia

Ich glaube nicht. Also, bin mir ziehmlich sicher.

Du könntest vielleicht, wenn du wirklich extrem drauf bist, das ganze "hover"-Zeug, also was reagieren soll in einer div den Hintergrund packen. Diese div reagiert dann komplett auf ein hover und dadrinne ordnest du alles so an wo es normal erscheinen soll und baust die Seite drüber mit absoluter Positionierung und/oder z-index.

Die Seite muss dann an den richtigen Stellen Löcher haben wo die zu hovernden Elemente von der div durchgucken um die Maus an den Stellen abzufangen. Die "Seite" kann ja teilweise tranzsparent sein, muss nur drüber liegen damit es nicht überall reagiert.

0

Du gehst in deine css Datei: Dort steht ja zum Beispiel sowas: div{ background-color: red; color: yellow; } Sagen wir du willst jetzt das beim Hovern der Hintergrund orange wird: Du schreibst dann darunter: div:hover{ background-color: orange; } Die Textfarbe (color) wird erhalten. Hoffe ich konnte helfen, lg EnderCookie

ja das sit mir klar, sowas hab cih ja schon drin.

die frage ist ob ich zum beispiel im "div1:hover{" sagen kann dass sich "div2" verändern soll.

trotzdem erstmal danke

0

sry das hatte ich überlesen. Tut mir leid, da weiß ich nicht weiter

0

CSS :hover anderes Element wählen?

Hallo,

Ich bin mir nicht sicher ob sich hier jemand mit auskennt aber ich probier es trotzdem mal.

Also vor kurzen hab ich mit html und css angefangen, jetzt habe ich eine <ul>(Element2) erstellt und darunter noch eine weitere <ul>(Element2) : sprich, wenn man mit dem cursor daruf geht (:hover) so öffnet sie sich.

Was ich machen wollte ist, wenn man auf der zweiten <ul> drauf ist so soll die erste eine andere Farbe bekommen, sodass man erkennt auf welcher man sich gerade befindet.

Eigentlich müsste es doch so gehen

Element2:hover > Element1 {

color: red;

}

Normal funktioniert das ja auch bei anderen Sachen.

Das Zeichen ">" bedeutet doch, dass dann auf dieses Sache zugegriffen wird?

...zur Frage

HTML / CSS Bilder bei hover für 5 Sekunden anzeigen?

Wenn ich über Bild "A" Hover will ich, dass bild "B" für 5 Sekunden angezeigt wird und wieder verschwindet. Aber wenn Bild "B" für 5 Sekunden sichtbar ist soll man da drüber hovern und dann sieht man Bild "C" für 5 Sekunden :D Geht das irgendwie ? Wenn ja -> HOW?

...zur Frage

HTML/CSS Wieso klappt das Hover-Event nicht?

Moin,

hat jemand auf die Schnelle noch eine Ahnung, wieso das Hover-Event in meinem Nav-Menu nicht funktioniert?

Hier der gekürzte betreffende Ausschnitt aus dem HTML-Code...:

<html>
	<body>
		<header>
			<div class="navbar-left">
				<a class="navbar-item" href="XY">Beispiel</a>
			</div>
		</header>
	</body>
</html>

...und hier der zugehörige Ausschnitt von CSS:

.navbar-item{
	color: #FFFFFF;
	font-family: Arial Black;
	text-decoration: none;
	font-size: 20px;
	text-transform: uppercase;
	transition-duration: 0.1s;
}

.navbar-item:hover{
	transform: scale(1.1);
}

LG

...zur Frage

[HTML/CSS] Bild wechselt, wenn man mit der Maus darüberfährt?

Hi!

Angenommen ich habe 2 Bilder.

Wenn ich auf meiner Website über ein Bild fahre, soll an der selben Stelle ein anderes Bild erscheinen. (Die Bilder sind gleich groß) Ich denke hierbei an einen Hover-Effekt, weiss aber nicht wie ich das machen soll.

Vielen Dank und LG -Florian

...zur Frage

Wie füge ich einen Hover- Effekt ein?

Hallo, ich habe total vergessen, wie man einen Hover- Effekt einfügt.

Was muss man nochmal ins HTML und CSS eingeben, wenn man z.B den Mouseover Effekt haben will?

Vielen Dank im Voraus

...zur Frage

Wie kann ich ein Bild halb unsichtbar machen und mit hover-Effekt anzeigen lassen?

Ich möchte in HTML und/oder CSS ein Bild halb unsichtbar machen wenn man mit der Maus über die Bildhälfte geht soll es angezeigt werden. Kann mir jemand helfen?

P.S. ich kenne mich nicht sehr gut mit HTML/CSS und JavaScript aus!

Danke im vorraus

LG. Andreas

...zur Frage

Was möchtest Du wissen?