Bild und Text bei hover tauschen

[elcomportal]

Hallo,

habe mal wieder ein kleines Problem.

ich habe ein paar links auf einer Seite.

mit hover tausche ich bei den Dingern die Hintergrundbilder aus.

Wie kann ich die Bilder UND gleichzeitig auch den Text austauschen?

Wenn möglich ohne Javascript oder andere Gemeinheiten. Und es sollte auf möglichst allen aktuellen Browsern funktionieren.

Hier ein Teil des Codes meiner CSS Datei:

#subnavlist li a:link {
    WIDTH: 157px; height: 52px;
    BACKGROUND: url(buttonnp.jpg);
    background-repeat:no-repeat;
    display: block;
    text-align:center;
    margin: 0px auto 0px -25px;
    padding: 10px 1px 2px 1px;
    text-decoration: none;
    color: #05058f;}
#subnavlist li a:hover{
    WIDTH: 157px; height: 52px;
    BACKGROUND: url(buttonhov.jpg);
    background-repeat:no-repeat;
    display: block;
    text-align:center;
    margin: 0px auto 0px -25px;
    padding: 10px 1px 2px 1px;
    text-decoration: none;
    color: #0090ff;}

Mfg
Torsten Müller

[wahsaga]

hi,

Wie kann ich die Bilder UND gleichzeitig auch den Text austauschen?

Beide Texte separat selektierbar machen - bspw. durch Einsetzen in zwei Spans - und dann den einen per Default un- und den anderen sichtbar darstellen, und für :hover per Nachfahrenselektor o.ä. entsprechend umdrehen.

gruß,
wahsaga

[elcomportal]

Hallo,
wie muss ich das einbinden? Hast Du da ein kleines Beispiel?
Danke.
Mfg
Torsten Müller

[wahsaga]

hi,

wie muss ich das einbinden?

So, wie beschrieben:

Zwei Kindelemente im Link unterbringen, so dass diese mit CSS-Selektoren separat ansprechbar sind.
Und dann für den Normalzustand des Links den einen sichtbar, den anderen nicht sichtbra formatieren - und für a:hover vice versa.

gruß,
wahsaga

[elcomportal]

Hallo,
ich weiss nicht wie ich die Dinger integrieren soll und dann in der ext. CSS Datei ansprechen muss. Kannst Du mir da mal bitte weiterhelfen?
Zum Test habe ich folgendes gemacht:
    <a href="01_prod_05_sonder_00.htm">
    <span id="1" style="visibility:visible;"> hallo du da <br> test</span>
    <span id="2" style="visibility:hidden;"> der andere Text <br> test</span>                        -->
    </a>

Aber ich weiss absolut nicht wie ich das in der CSS Datei machen muss.

Mfg
Torsten Müller

[wahsaga]

hi,

ich weiss nicht wie ich die Dinger integrieren soll und dann in der ext. CSS Datei ansprechen muss. Kannst Du mir da mal bitte weiterhelfen?
Zum Test habe ich folgendes gemacht:
    <a href="01_prod_05_sonder_00.htm">
    <span id="1" style="visibility:visible;"> hallo du da <br> test</span>
    <span id="2" style="visibility:hidden;"> der andere Text <br> test</span>                        -->

Diese IDs sind ungültig.

Aber ich weiss absolut nicht wie ich das in der CSS Datei machen muss.

Stichwort: Nachfahrenselektor.

gruß,
wahsaga

[elcomportal]

Hallo,
ich kriege das nicht hin. Wie funktioniert die Vererbung und wie kann ich denn die spans innerhalb von a:hover { ansprechen?
Mfg
Torsten Müller

[Gunnar Bittersmann]

Hello out there!

ich kriege das nicht hin.

Ohne dass du zeigst, was du gemacht hast, kann dir niemand sagen, was du falsch gemacht hast.

Wie funktioniert die Vererbung

Warum bringst du Vererbung ins Spiel?

und wie kann ich denn die spans innerhalb von a:hover { ansprechen?

Mit dem Selektor für Nachfahren. [CSS2 §5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]

See ya up the road,
Gunnar

[elcomportal]

Hallo,
also das habe ich jetzt:

Auszug aus der CSS Datei:
.v1 {visibility:hidden;}
.v2 {visibility:hidden;}

.bild1 {
    position: absolute;
    background: #dF0000;
    BACKGROUND: url(images/content/produkte/ut_hecken.gif);
    left: 177px;
    top: 60px;
    height:28%;
    width:28%;
    border:0px;
    overflow: auto;
    background-repeat:no-repeat;
    .v2 {visibility:visible;}
}

.bild1 a:hover {
    display: block;
    padding: 5px;
    background: #dfdfdf;
    background-repeat:no-repeat;
    .v1 {visibility:visible;}
}

und die HTML Datei:

<div class="bild1" style="Z-INDEX: 10; LEFT: 2%; VISIBILITY: inherit; POSITION: absolute; TOP: 21%;">
    <a href="01_prod_05_sonder_00.htm">
    <span class="v1"> hallo du da <br> test</span>
    <span class="v2"> der andere Text <br>   test</span>
    </a>

Keiner der beiden Texte wird sichtbar. Schei...!
Bitte helft mir nochmal.
Danke.
Mfg
Torsten Müller

[wahsaga]

hi,

.bild1 a:hover {
     ...
    .v1 {visibility:visible;}
}

Diese Verschachtelung ist reine Phantasie-Syntax.

Den Nachfahrenselektor nutzt du hier doch schon - a gehoverte Links, die Nachfahren eines Elements mit der Klasse bild1 sind.

Jetzt musst du ihn nur noch mal für Elemente, die Nachfahren dieses Links sind, nutzen.

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

.bild1 {
    position: absolute;
    background: #dF0000;
    BACKGROUND: url(images/content/produkte/ut_hecken.gif);

Obwohl CSS in weiten Teilen case-insensitive ist, solltest du dich an Konventionen halten: Hexadezimalziffern groß, Eigenschaftsnamen klein.

Dir ist bewusst, dass du mit der Sammeleigenschaft 'background' die nicht angegeben Eigenschaften wieder auf ihren Ausgangswert setzt, 'background-color' also auf 'transparent'?

Also entweder

{  
  background-color: #DF0000;  
  background-image: url(images/content/produkte/ut_hecken.gif);  
}

oder beides zusammen

{  
  background: #DF0000 url(images/content/produkte/ut_hecken.gif);  
}

background-repeat:no-repeat;
    .v2 {visibility:visible;}
}

Nein, CSS ist keine Programmiersprache. Also nicht wie in JavaScript

function foo()  
{  
  tu_was();  
  function bar()  
  {  
    tu_nochwas();  
  }  
}

in CSS

Selektor  
{  
  Regel  
  Selektor  
  {  
    Regel  
  }  
}

Sonder den Nachfahrenselektor richtig notieren.

.bild1 a:hover {

Na bitte, geht doch.

See ya up the road,
Gunnar

[elcomportal]

Hallo ;-((

Das habe ich jetzt und gebe jetzt auf. Ich probiere jetzt schon stundenlang. NICHTS geht. Ich habe jetzt die Schnauze voll und schmeisse den Dreck in die Ecke!

CSS:
.bild1 {
    position: absolute;
    BACKGROUND: #DF0000 url(images/content/produkte/ut_hecken.gif);
    left: 177px;
    top: 60px;
    height:28%;
    width:28%;
    border:0px;
    overflow: auto;
    background-repeat:no-repeat;
}
.bild1 a:hover {
    display: block;
    padding: 5px;
    background: #dfdfdf;
    background-repeat:no-repeat;
}
.bild1 a:hover an {
    visibility:hidden;
}

HTML
    <div class="bild1" style="Z-INDEX: 10; LEFT: 2%; VISIBILITY: inherit; POSITION: absolute; TOP: 21%;"><center>
    <a href="01_prod_05_sonder_00.htm">
    <span class="an"> hallo du da <br> test</span>
    <span class="aus"> der andere Text <br> test</span>
    </a>

Mfg
Torsten

[wahsaga]

hi,

.bild1 a:hover an {

Existiert etwa ein HTML-Element mit dem Tagnamen an?

Du willst dich doch auf die Klasse an beziehen - wie das mit der Klasse bild ging, wusstest du wenige Zeichen weiter vorn doch noch.

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

.bild1 {
    position: absolute;
    BACKGROUND: #DF0000 url(images/content/produkte/ut_hecken.gif);

Sagte ich nicht was von Eigenschaften kleinschreiben?

background-repeat:no-repeat;

Das kannst du auch mit in der 'background'-Eigenschaft angeben. [CSS2 §14.2.1]

}
.bild1 a:hover {
    display: block;
    padding: 5px;

Macht das Sinn, 'a'-Elementen nur dann padding zu verpassen, wenn sie gehovert sind?

background: #dfdfdf;

Sagte ich nicht was von Hexadezimalziffern großschreiben?

.bild1 a:hover an {

Das selektiert 'an'-Elemente, die Nachfahren von gehoverten 'a'-Elementen sinde, die wiederum Nachfahren von Elementen der Klasse "bild1" sind. Solche gibt es nicht.

Es gibt aber Elemente der Klasse "an", die Nachfahren von gehoverten 'a'-Elementen sinde, die wiederum Nachfahren von Elementen der Klasse "bild1" sind. Diese selektierst du mit '.bild1 a:hover .an'; weißt du doch. [CSS2 §5]

<div class="bild1" style="Z-INDEX: 10; LEFT: 2%; VISIBILITY: inherit; POSITION: absolute; TOP: 21%;"><center>

Was hat das 'style'-Attribut da zu suchen? Die Angaben kommen auch ins Stylesheet – eben für den Selektor '.bild1'. Und sagte ich nicht was von Eigenschaften kleinschreiben?

Und bist du sicher, dass du nicht eine ID statt einer Klasse vergeben möchtest? [CLASS-ID]

Und was hat das 'center'-Element da zu suchen? Auch diese Formatierung ist Sache von CSS.

Und nicht aufgeben, du schafft das schon.

See ya up the road,
Gunnar

[wahsaga]

hi,

Sagte ich nicht was von Hexadezimalziffern großschreiben?

Das tatest du.
Warum eigentlich?

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

Sagte ich nicht was von Hexadezimalziffern großschreiben?

Das tatest du.
Warum eigentlich?

Guter Stil.

Oder meinstest du, warum ich es elcomportal sagte, wenn’s doch ungehört verhallt? >;-)

See ya up the road,
Gunnar

[wahsaga]

hi,

Sagte ich nicht was von Hexadezimalziffern großschreiben?

Das tatest du.
Warum eigentlich?

Guter Stil.

Gut per welcher (bzw. wessen) Definition?

gruß,
wahsaga

[Gunnar Bittersmann]

Hello out there!

Gut per welcher (bzw. wessen) Definition?

In XML Schema Teil 2: Datentypen bspw. wird die Großschreibung als kanonische Repräsentation festegelegt. [XSD §3.2.15.2] (Gilt auch für das 'E' bei float und double: §3.2.4.2, §3.2.5.2)

See ya up the road,
Gunnar