Zugriff auf unabhängigen DIV

robertpaessler · #1 (**permalink**) 26.05.2016, 22:28

Hallo Experten,

ich verzweifle hier fast. Ich habe jetzt mehrere Stunden recherchiert, aber nicht die passende Lösung gefunden. Vielleicht existiert auch keine?!

Ich habe zwei unabhängige DIV, sagen wir <div id="1"> und <div id="2">. In #1 befindet sich ein Link. Wenn ich diesen Link anklicke, soll sich der Hintergrund von #2 ändern. Wie geht das? Geht das überhaupt?

Herzliche Grüße
Robert

cloned · #2 (**permalink**) 27.05.2016, 07:34

Ein Link ist ein Verweis auf eine andere Seite, bzw. eine Sprungmarke auf eine eigene Seite. Hier wäre ein Button-Element zu empfehlen (man kann auch einen button so stylen wie man will)
Und ja, das geht, aber das Forum ist kein "Wir machen dir die ganze Arbeit"-Forum, wir helfen dir, wenn du konkrete Probleme hast. Hier also Stichworte, mit denen du dich auf die Suche machen kannst: javascript button onclick preventdefault.
Falls du konkrete Fragen hast, helfen wir dir natürlich auch gerne weiter.

protonenbeschleuniger · #3 (**permalink**) 27.05.2016, 07:37

Zitat:

Zitat von robertpaessler

ich verzweifle hier fast. Ich habe jetzt mehrere Stunden recherchiert, aber nicht die passende Lösung gefunden. Vielleicht existiert auch keine?!

Es wäre interesant gewesen, wenn du uns zeigen würdest, was du probiert hast.

Denn das, was du beschreibst ist äußerst Trivial und ich kann mir nicht vorstellen wie man nach mehreren Stunden Recherche keinen Ansatz dafür findet.

robertpaessler · #4 (**permalink**) 27.05.2016, 09:13

Hallo cloned,
hallo patronenbeschleuniger,

ich füge hier kurz einen Testquellcode ein. Zuert meine HTML:

Code:

<html>
	<div id="a">
	</div>
	<div id="b">
	</div>
/html

Nun meine CSS:

Code:

#a
{
	height: 200px;
	width: 200p;
	background-color: #030303;
}

#b
{
	height: 200px;
	width: 200px;
	background-color: #efefef;
}

#b:hover
{
	background-color: #040404;
}

Wenn ich jetzt mit der Maus auf #2 bin, ändert sich die Hintergrundfarbe dessen. Aber ich möchte, dass sich die Hintergrundfarbe von #1 ändert, wenn ich über #2 fahre. Es müsste also irgendwie diesen Befehl geben:

Code:

#b:hover -> #a
{
	background-color: #f3f3f3;
}

Sehe ich einfach den Wald vor lauter Bäumen nicht?

Wenn es mit einem hover-Befehl geht, dann möchte ich es noch mit einem Klick auf einen Link in #1. Aber zu meinem Verständnis benötige ich vorerst obiges Problem.

Beste Grüße
Robert

protonenbeschleuniger · #5 (**permalink**) 27.05.2016, 09:28

Jetzt wird es klar.

Ich habe nicht bemerkt, dass du in der Rubrik CSS gepostet hast deine Beschreibung klang so nach JS, dass ich (und vermutlich auch cloned) davon ausging du sprichst von einem JS Weg.

Mit CSS geht das nicht.

dazzle89 · #6 (**permalink**) 27.05.2016, 09:28

Wenn sich IN div#1 ein Link befinden soll, geht das mit purem CSS NICHT, weil du ein "voriges" Element ansprechen müsstest.

Wenn es allerdings reicht, auf div1 zu klicken, geht das theoretisch schon, denn du kannst das nachfolgende div problemlos ansprechen. Das Problem ist nur, dass es in CSS kein wirkliches Klick-Event gibt. Es gibt aber den sogenannten Checkbox-Hack, bei dem du eine Checkbox als Link verwendest:

https://css-tricks.com/the-checkbox-hack/

Dann musst du natürlich statt div1 eine Checkbox verwenden, die sich auf der gleichen Ebene wie div2 befindet.

Ansonsten ist das ganze auch ziemlich einfach mit jQuery möglich. Dort hast du den Vorteil, dass du jedes beliebige Element (auch vorige) auf der Seite ansprechen kannst, du könntest also auch mit einem Link innerhalb von div1 arbeiten.

robertpaessler · #7 (**permalink**) 27.05.2016, 09:40

Hallo patronenbeschleuniger,

es tut mirleid, wenn ich mich zu Beginn falsch bzw. zu ungenau ausgedrückt habe. Ich konnte mir schon denken, dass es mit CSS nicht geht. Aber warum eigentlich? Bin ich der Einzige, dem das helfen würde? Hab jedoch vielen Dank für deine Rückmeldungen.

Hallo dazzle89,

den Checkbox-Hack habe ich auch schon gefunden, jedoch muss es über einen Link gehen. Danke auch dir herzlich für deine Informationen.

Ich werde mich jetzt wohl mit JS befassen müssen. Hatte ich zwar nicht vor, muss ich jetzt aber wohl durch. Kann mir jemand eine Seite nennen, in der ich zu meinem Problem etwas finde?

Beste Grüße
Robert

MrMurphy · #8 (**permalink**) 27.05.2016, 09:40

Hallo

Deine Informationen sind leider sehr dünn.

Mit CSS gibt es nur eine Lösung, wenn sich #a im Quelltext hinter #b befindet. Durch flexbox kann #a im Browser aber problemlos vor #b angezeigt werden.

Der gesamte Quellcode könnte zum Beispiel folgendermaßen aussehen:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Hover-Effekt 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      body {
         margin: 0;
         display: flex;
         flex-direction: column;
      }
      #a {
         background-color: #030303;
         width: 200px;
         height: 200px;
         order: -1;
      }
      #b {
         background-color: #efefef;
         width: 200px;
         height: 200px;
      }
      #b:hover ~ #a {
         background-color: red;
      }
   }

   </style>
</head>
<body>
   <div id="b"></div>
   <div id="a"></div>
</body>
</html>

Gruss

MrMurphy

dazzle89 · #9 (**permalink**) 27.05.2016, 09:50

Er möchte ja innerhalb von div1 einen Button haben, deshalb geht das mit CSS leider nicht.

Habe dir mal eine Vorlage mit jQuery gemacht:

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <style>
	 	#b {
		 	width: 200px;
		 	height: 200px;
		 	background: red;
	 	}
	 	
	 	#b.green {
		 	background: green;
	 	}
   </style>
</head>
<body>
   <div id="a">
	   <span class="button">Klick mich</span>
   </div>
   <div id="b"></div>
   
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script>
$(".button").click(function() {
  $("#b").addClass("green");
});
</script>
</body>
</html>

Erklärung:
Wenn der Button angeklickt wird, erhält das div eine neue Klasse. Die Klasse hat dann die gewünschten CSS-Eigenschaften. Du kannst auch direkt per Javascript den Hintergrund ändern, also ohne Klasse.

Statt eines Links habe ich mal ein span benutzt, weil ich grad nicht ausm Kopf weiß wie man verhindert, dass beim Klick die Seite neu geladen wird.

etux · #10 (**permalink**) 27.05.2016, 11:03

Nur als Ergänzung zu den Beispielen. Per „hover“ und mit einbeziehen des Elternelementes ( body, da es ja eh schon da war).

HTML-Code:

<!doctype html>
<meta charset="utf-8">
<title>robertpaessler :: xhtmlforum.de</title>
<style>
html { height: 100%; text-align: center; background-color: #fff; }
html:after { content: ''; display: inline-block; vertical-align: middle; width: 1px; height: 100%; }
body { display: inline-block; vertical-align: middle; text-align: left; }
#a, #b { height: 200px; width: 200px; }

#a { background-color: #030303; }
#b { background-color: #efefef; }
#b:hover { background-color: #040404; }
body:hover #a { background-color: #f3f3f3; }
body #a:hover { background-color: #030303; }
</style>
<div id="a"><!--&nbsp;--></div>
<div id="b"><!--&nbsp;--></div>

P.S.: So haben wir es „früher“ gemacht.

Bei einem Link könnte man auch über eine Lösung mit „:target“ nachdenken.
Entscheiden ist aber die Aufgabe und der restliche Seiten-Code.
Ansonsten per JavaScript lösen und soweit wie möglich mit CSS absichern.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fragen zu CSS und Joomla	DOKTOR	CSS	2	23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts	Zwox	CSS	10	19.11.2010 16:53
Header entfernen	tripple	CSS	17	15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms	Steveislucky	CSS	2	16.03.2010 10:59
CSS Text nebeinander?	carstiee09	CSS	13	13.11.2009 19:18