Format für <input type... definieren

[Der Martin]

Hi,

»» »» Kann man mit CSS das Bild des Buttons ersetzen, wenn er mit dem Cursor überfahren wird?
»» HTML:
»»  <button type="submit"><img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="hover"></button>
»» CSS:
»»  button img.hover  { display: none; }
»»  button:hover img  { display: none; }

Ich fürchte, ich bringe jetzt die einzelnen Möglichkeiten durcheiander?

weiß ich nicht, aber ich sehe, dass wir beide nicht aufgepasst haben. Wenn ich button:hover img { display: none; } notiere, dann werden selbstverständlich *beide* Bilder beim Hovern ausgeblendet, denn der Selektor trifft ja auf beide zu. Ich muss also *beiden* Bildern eine unterschiedliche Klasse geben, so dass ich sie beide gezielt selektieren und wechselweise ein- und ausblenden kann. Das bekommst du jetzt aber selbst hin ...

<form action="">
  <div>
    <button name="Klickmich" type="submit"
      value="Verzeigen" onclick="window.location.href='http://www.example.test'">
      <p>
        <img src="image1.jpg" alt=""><img src="image2.jpg" alt="" class="button">
      <br>
      </p>
    </button>
  </div>
</form>

Warum du die Bilder nochmal in einen Absatz verpackst, ist mir schleierhaft; ebenso, warum du vor dem Absatzende noch ein <br> unterbringst (ist an dieser Stelle wirkungslos).
Und warum hat dein Bild die Klasse "button", obwohl das CSS "hover" anspricht? - Das ist dein Teil des Fehlers, den ich eingangs meinte.

1. Beide Bilder werden nebeneinander angezeigt

Logisch. Durch den "falschen" Klassennamen wird keins selektiert, was dann verschwinden könnte.

2. Um die Bilder ist ein grauer Rahmen (Button-Aussehen)

Klar. Ist ja der Sinn der Sache.

3. Bewege ich die Maus auf den Rahmen, so vershhwinden die Bilder und es bleibt der stark verschmälerte Rahmen

Mein Fehler, siehe oben.

4. Bewege ich den Curso über die Bilder, so flackert das Ganze

Das dürfte auch damit zusammenhängen.

Schönen Sonntag noch,
 Martin