Text unsichtbar html css?

Hi, ich prgrammiere eine website in html und css.

ich habe einen container und eine box erstellt und will dass man nur das hintergundbilt und ein text sieht sieht und wenn man drauf geht mit :hover dass dann ein andere text erscheint. wäre dass möglich?

Answer 1

[regex9]

Einfaches Beispiel:

HTML:

<div class="box">
  <span class="text-a">Text A</span>
  <span class="text-b">Text B</span>
</div>

CSS:

.box > .text-a,
.box:hover > .text-b {
  display: block;
}

.box > .text-b,
.box:hover > .text-a {
  display: none;
}

Bezüglich des Aspekts Barrierfreiheit ist dieser Artikel informativ.

Answer 2

[NackterGerd]

Klar geht das.

Aber immer auch daran Denken was Google sieht und wie es Mobil bedienbar ist. Dort gibt es keine Maus.

Nicht zu vergessen Barrierefreiheit zu beachten

Answer 3

[indexhtml]

Versuchs mal mit
…. ::hover{

content: "lorem ipsum2";

}

ansonsten könnte ich dir das in JavaScript vor machen.