php-html-css.de

wird geladen...

 Close Menu
php-html-css.de

CSS - Durch Hover über Box A eine Aktion bei Box B hervorrufen

Problem:

Ich möchte das, sollte ich den Mauszeiger über eine Box (divA) halten, das eine andere Box (divB) entweder erscheint (ToolTip oder Menü), oder ihr Aussehen verändert.

Lösung:

Das ganze läßt sich mit CSS realisieren und bietet viele Möglichkeiten es zu verwenden.

Das alles hängt an einen magischen Zeichen dem "+" o. "~". So, fangen wir mal an.

Es existieren zwei Boxen "divA" und "divB". Wenn ich über Box A fahre, möchte ich das Box B grün wird. Dazu müssen wir erstmal die Boxen erschaffen.

#divA {
	position: absolute;
	top: 1em;
	left: 1em;
	background-color: #E06624;
	text-align: center;
	width: 6em;
	height: 4em;
	font-size: 2em;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	line-height: 2em;
	padding-top:2em;
}
#divB {
	position: absolute;
	top: 1em;
	left: 8em;
	background-color: #E06624;
	text-align: center;
	width: 6em;
	height: 4em;
	font-size: 2em;
	color: #ffffff;
	font-family: 'Open Sans', sans-serif;
	line-height: 2em;
	padding-top:2em;
}

So, nun der Code. Er setzt sich zusammen aus "Element:hover + Elementzuändern {neue Eigenschften}" also,

#divA:hover + #divB {
	background-color: green;
}

Das schreiben wir noch unter das 1. CSS und erhalten dann folgendes Ergebnis:

Box A
Box B

Das Ganze geht, meines Wissens, nur mit dem Selector ":hover". Sollte man ein anderes Ereignis (anklicken, markieren usw.) bevorzugen sollte man Java-Script wählen.

download

Arikel teilen auf:



:




Zeige 1 Kommentar:
#1
Welcome to our site and if you involve in the Entertainment business and you are eager to start a website then, visit our Entertainment category of a website template.
You will find the amazing quality of the website templates. You download these templates as free and can be modified according to your needs.
All the templates are 100% responsive and fit to all screen resolutions.
https://www.templateonweb.com/website-templates/entertainment