CSS: Bedingungen möglich?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas
funnyweb

funnyweb hat kostenlosen Webspace.
18:28, 20.1.2016
Hallo,

wenn man z. B. ein bestimmtes Objekt ändern will, wenn der User gerade mit der Maus über einem anderen ist, geht das nur mit JS oder auch mit CSS?

Beispiel: Ich habe einen
```
div#s1
```
und einen
```
div#s2
```
jeweils der Klasse
```
div.s
```
und dazu einen
```
div#t1
```
und einen
```
div#t2
```
jeweils der Klasse
```
div.t
```
.
Immer dann, wenn über
```
#s1
```
(bzw.
```
#s2
```
) sich der Mauszeiger befindet, soll
```
#t1
```
(bzw.
```
#t2
```
) per
```
filter: blur(10px);
```
unscharf gemacht werden.
Gibt es nun die Möglichkeit, das in etwa so zu lösen?:
```
#s1:hover{
	#t1{
		filter: blur(10px);
	}
}
#s2:hover{
	#t2{
		filter: blur(10px);
	}
}
```
Sehr kreativ, ich weiß. Natürlich funktioniert diese Lösung nicht, aber gibt es eine ähnliche Möglichkeit?
Sachen wie
```
@media screen and (orientation: portrait) {
	body {
		background-color: white;
	}
}
@media screen and (orientation: landscape) {
	body {
		background-color: black;
	}
}
```
funktionieren ja. Gibt es vielleicht ähnliche Selektoren wie
```
@media
```
, mit denen das funktioniert?

Danke und LG

Beitrag zuletzt geändert: 20.1.2016 18:29:56 von funnyweb
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
all-in1

all-in1 hat kostenlosen Webspace.

20:18, 20.1.2016
Mit hover z.B.

Referenz: http://www.w3schools.com/cssref/sel_hover.asp
~~g****e~~
20:49, 20.1.2016
Das kommt auf die Herachie drauf an. Wie liegen die Elemente zueinander?
```
<style>
#oben {
    height:200px;
    width: 200px;
}
#oben:hover #unten {
    height: 50px;
    width: 50px;
    filter: blur(10px);
}
</style>
<div id="oben">
    <div id="unten"></div>
</div>
```
Wenn die Elemente in keiner Beziehung zueinander stehen, ist es sonst nicht so einfach möglich. Es gibt sonst noch den Sibling-Selector, also die ~, das sähe dann so aus:
```
<style>
#oben {
    height:200px;
    width: 200px;
}
#oben:hover ~ #unten {
    height: 50px;
    width: 50px;
    filter: blur(10px);
}
</style>
<div id="oben"></div>
<div id="unten"></div>
```
Bedingungen selbst gibt es sonst nicht.
Du kannst mit Pseudo-Klassen solche Interaktionen abfangen. Hier eine Liste aller möglichen Pseudo-Klassen, mit denen du bedingte Interaktivität einbauen kannst: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Das musst du nu nur mit den entsprechenden Kombinationen verbinden, die du hier nachschlagen kannst: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference. Hier recht weit unten Selectors -> Combinators.

Ich hoffe das hilft.

Liebe Grüße
hddg

hddg hat kostenlosen Webspace.
21:44, 20.1.2016
CSS-Selektoren sind Bedingungen. Wenn Du mit den Selektoren ausdrücken kannst, in welcher Beziehung das Element, über dem der Mauszeiger steht (also das Element, an das Du das ":hover" anhängst), und das zu formatierende Element stehen, ist Dein Problem gelöst.

Ein Beispiel:
```
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      div#s1 {
        border:1px solid black;
        width:20em;
      }
      div#s2 {
        width:5em;
        height:4ex;
      }
      /* #s2 kommt nach #s1 und es sind zwei beliebige Elemente dazwischen: */
      div#s1:hover+*+*+div#s2 {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="s1">
      <p>hover over me !</p>
    </div>
    <p>Einfach nur als unsinniges Beispiel &hellip;</p>
    <hr />
    <div id="s2">
    </div> 
  </body>
</html>
```
Die div#s2 wird grün, wenn der Mauszeiger über der div#s1 steht. Wenn Du eines der beiden Elemente zwischen den beiden divs entfernst, funktioniert es nicht mehr, da der Selektor bedeutet: ein s2 Element zwei (beliebige) Elemente nach einem s1 über dem der Mauszeiger steht.
Es gibt neben den von mir und ggamee genannten Möglichkeiten noch ein paar andere. Die exakten Details über CSS-Selektoren findest Du hier beim W3C.

H.
mein-wunschname

mein-wunschname hat kostenlosen Webspace.

23:26, 20.1.2016
Wenn die genannten IDs unabhängig von einander in der HTML-Struktur stehen, dann ist das mit Nur-CSS schwierig und es bleibt wohl nur eine JavaScript Lösung. Mit jQuery geht das sehr komfortabel. Siehe Beispiel bei
https://api.jquery.com/hover/
Autor dieses Themas
funnyweb

funnyweb hat kostenlosen Webspace.
17:27, 23.1.2016
ggamee schrieb:

Das kommt auf die Herachie drauf an. Wie liegen die Elemente zueinander? […]
Sie sind quasi »Cousins«:
html
→ head
→ body
→ → div
→ → → div
→ → → → div#t1
→ → → → div#t2
→ → div
→ → → div
→ → → → div#s1
→ → → → div#s2
→ → div

ggamee schrieb:
[…]
```
<style>
#oben {
    height:200px;
    width: 200px;
}
#oben:hover #unten {
    height: 50px;
    width: 50px;
    filter: blur(10px);
}
</style>
<div id="oben">
    <div id="unten"></div>
</div>
```
Wenn die Elemente in keiner Beziehung zueinander stehen, ist es sonst nicht so einfach möglich. Es gibt sonst noch den Sibling-Selector, also die ~, das sähe dann so aus:
```
<style>
#oben {
    height:200px;
    width: 200px;
}
#oben:hover ~ #unten {
    height: 50px;
    width: 50px;
    filter: blur(10px);
}
</style>
<div id="oben"></div>
<div id="unten"></div>
```
Bedingungen selbst gibt es sonst nicht.
Du kannst mit Pseudo-Klassen solche Interaktionen abfangen. Hier eine Liste aller möglichen Pseudo-Klassen, mit denen du bedingte Interaktivität einbauen kannst: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
Das musst du nu nur mit den entsprechenden Kombinationen verbinden, die du hier nachschlagen kannst: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference. Hier recht weit unten Selectors -> Combinators.

Ich hoffe das hilft.

Liebe Grüße
Dankeschön!

hddg schrieb:
CSS-Selektoren sind Bedingungen. Wenn Du mit den Selektoren ausdrücken kannst, in welcher Beziehung das Element, über dem der Mauszeiger steht (also das Element, an das Du das ":hover" anhängst), und das zu formatierende Element stehen, ist Dein Problem gelöst.

Ein Beispiel:
```
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
      div#s1 {
        border:1px solid black;
        width:20em;
      }
      div#s2 {
        width:5em;
        height:4ex;
      }
      /* #s2 kommt nach #s1 und es sind zwei beliebige Elemente dazwischen: */
      div#s1:hover+*+*+div#s2 {
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="s1">
      <p>hover over me !</p>
    </div>
    <p>Einfach nur als unsinniges Beispiel &hellip;</p>
    <hr />
    <div id="s2">
    </div> 
  </body>
</html>
```
Die div#s2 wird grün, wenn der Mauszeiger über der div#s1 steht. Wenn Du eines der beiden Elemente zwischen den beiden divs entfernst, funktioniert es nicht mehr, da der Selektor bedeutet: ein s2 Element zwei (beliebige) Elemente nach einem s1 über dem der Mauszeiger steht.
Es gibt neben den von mir und ggamee genannten Möglichkeiten noch ein paar andere. Die exakten Details über CSS-Selektoren findest Du hier beim W3C.

H.
Herzlichen Dank, diese Art Sibling-Selektor ist ideal dafür!

Beitrag zuletzt geändert: 23.1.2016 17:29:02 von funnyweb
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city

CSS: Bedingungen möglich?

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!