Mouseover Text - Bild

[MisterSimpson]

Hallo,

ich möchte folgendes realisieren.

Es steht Text und wenn ich mit der Maus über den Text fahre dann wird das Bild anders. Aber auch wenn ich über das Bild mit der Maus fahre soll der Text anders erscheinen.

Habe jetzt was, aber geht das auch ohne JavaScript. Folgenden Code habe ich jetzt:

<script type="text/javascript">
function swapImage(imgName,swapImg) {
        document.images[imgName].src=swapImg;
}
</script>
<img src="fileadmin/hocker.jpg" onmouseover="this.src='fileadmin/hocker2.jpg'" onmouseout="this.src='fileadmin/hocker.jpg'" name="hocker" />
<a href="https://www.google.de" onmouseover="swapImage('hocker','fileadmin/hocker2.jpg')" onmouseout="swapImage('hocker','fileadmin/hocker.jpg')">Hier steht mal Text</a>

 

[Bububoomt]

ohne JS, also mit CSS kannst du meines Wissen nach nur das selbe Element per Hover verändern.

 

[theHacker]

Du kannst mit CSS auch Unterelemente verändern, z.B:

a:hover img {
  border: 1px solid red;
}

Konkret für den Fall hier könntest du mit background arbeiten, den du im Hover-Fall austauscht. Aber dann wäre ein JavaScript-Preloader auch sehr zu empfehlen, weil es sonst sehr bescheiden aussieht.

 

[Bububoomt]

Ja das schon, aber ich kann doch nicht durch a b verändern und durch b a verändern.

<div id="1"><div id="2"></div></div>

Es gibt keine möglichkeit nun durch div 1 div2 zu ändern und durch div2 div1 zu ändern.

 

[paddya]

Ja das schon, aber ich kann doch nicht durch a b verändern und durch b a verändern.

<div id="1"><div id="2"></div></div>

Es gibt keine möglichkeit nun durch div 1 div2 zu ändern und durch div2 div1 zu ändern.

Ersteres geht auf jeden Fall (s. tHs Post). Das zweite geht (bis jetzt) nicht, weil CSS3 kein Äquivalent zu :has() von z.B. Sizzle hat.

Greetz

paddya

 

[Bububoomt]

Das wörtchen und in meinem Satz bedeutet: beides gleichzeitig. das eins geht, durch vererbung, sas ist klar, aber halt nicht beides auf einmal.

Oder was wohl gar nicht geht wenns so aussieht:

<div id="1"></div><div id="2"></div>

So wie geht das?

Der ersteller will ja nciht nur einseitig sondern das zweiseitig, das geht eben nciht, nur mit JS.

 

[paddya]

Das wörtchen und in meinem Satz bedeutet: beides gleichzeitig. das eins geht, durch vererbung, sas ist klar, aber halt nicht beides auf einmal.

Jep. Da eine von beiden Varianten nicht geht, geht beides gleichzeitig natürlich auch nicht. Überlesen, sorry

Oder was wohl gar nicht geht wenns so aussieht:

<div id="1"></div><div id="2"></div>

So wie geht das?

#id1 + #id2:hover {}

Aber eben nur in eine Richtung.

Der ersteller will ja nciht nur einseitig sondern das zweiseitig, das geht eben nciht, nur mit JS.

Jep, scheitert wieder daran, weil CSS nur vorwärts, aber nicht rückwärts arbeiten kann.

Greetz

paddya

 

[B2T]

Also, durch Hover-Effekte kann man sehr wohl die durch Hover bewirkte Änderung rückgängig machen. Hier mal ein rohes Beispiel.

<div class="umgebend">
  Ich bin das, was Du jetzt siehst und was Du siehst,
  wenn Du die Maus wieder weggefahren hast.
  <div class="layer">
    Ich bin das, was Du erst mit darübergefahrener Maus siehst.
  </div>
</div>

Und dazu passend folgender CSS-Ausschnitt:

div.umgebend .layer {
  display : none;
}
div.umgebend:hover .layer {
  display : block;
  position : absolute;
}

 

[Bububoomt]

setzen sechs!

Das ist nicht was der ersteller will!

Der will etwa sowas:


<div id="1" >xx</div><div id="2">yyy</div>

maus über div1 -> in div2 steht hallo, maus raus in div2 steht yyy
Maus über div2-> in div1 steht hallihallo, maus wieder raus ind div 1 steht xx

 

[B2T]

Das geht trotzdem so. Mit entsprechender Hierarchisierung. Du hast in Wirklichkeit die Kette:

<div class="eins">
  Text 1
  <div class="zwei">
    Text 2
    <div class="drei">
      Text 1 (Klon)
    </div>
  </div>
</div>

Du positionierst .drei so wie .eins und mußt background-color nicht-transparent setzen. Die CSS-Definitionen sind dann etwas interessanter:

div.eins {
  color : inherit;
  background-color : #ffffff;
}
div.eins div.zwei {
  display : none;
}
div.eins:hover div.zwei {
  display : block;
  position : absolute;
  color : inherit;
  background-color : inherit;
}
div.eins:hover div.zwei div.drei {
  display : none;
}
div.zwei:hover div.drei {
  display : block;
  position : absolute;
  margin : <so dass .drei .eins überdeckt>;
  color : inherit;
  background-color : inherit;
}

Das color : inherit ist n.b. nur dazu da, um den CSS-Validator zufriedenzustellen.

EDIT: Auf meinen Stil editiert ...

 

[Bububoomt]

Diesen Umweg hatte ich auch schon im Kopf, aber das ja auch nicht sinn der Sache, das ich Kontent doppelt eintragen muß. Das könnte auch Google nicht gefallen.

 

[tleilax]

Aber dann wäre ein JavaScript-Preloader auch sehr zu empfehlen, weil es sonst sehr bescheiden aussieht.

Noch besser wäre in dem Fall ein CSS-Sprite, damit kann man dann an der Stelle auf JS komplett verzichten.