HTML Button füllen bei Mousover

Mädchen

Newbie
Registriert
März 2020
Beiträge
3
Hi,

kann mir jemand weiterhelfen? Ich habe einen Text im Rahmen und jetzt möchte ich, dass der ganze Rahmen bei Mousover sich verfärbt und nicht nur über dem Text. Außerdem möchte ich die Schriftgröße noch ändern.

Danke für eure Hilfe

 
<p style="text-indent:96px;"><span style="border:1px solid #b51639;padding:10px;"><a href="http://xxx.at/albums/"><a href="" id="id1" onmouseover="document.getElementById('id1').style.color='white'"
onmouseout="document.getElementById('id1').style.color='#b51639'"> Hörproben </a></span></p>
<html>
<head>
<style type="text/css">
a:hover { background-color: #b51639 }
</style>
</body>
</html>
&nbsp;
 
Hey,
das ganze "onmouseover" / "onmouseout" kannst du dir sparen, wenn es nur um Styles geht, du kannst dafür wie bei der background-color einfach direkt CSS verwenden:
CSS:
<style type="text/css">
a {
  color: #b51639;
}
a:hover {
  background-color: #b51639;
  color: white;
  border-color: red; // ersetzen durch gewünschte Farbe
  font-size: large; // ersetzen durch gewünschte Größe
}
</style>
Ansonsten bitte die Code-Tags verwenden, dadurch wird der Code direkt leserlicher.
 
So sollte es gehen:
CSS:
<style type="text/css">
  a {
    color: #b51639;
    line-height:auto;
    border:1px solid #b51639;
    padding:10px;
  }
 
  a:hover {
    background-color: #b51639;
    color: white;
  }
p{
    text-indent:95px;
  }
  </style>

und das HTML dazu:
HTML:
<p></p><a href="http://xxx.at/albums/"> Hörproben </a></p>
 
Hallo,

wenn Du den gesamten Rahmen in dem der Texte steht füllen willst bei Mouseover und nicht nur den Hintergrund des Textes, dann funktioniert das so. chau es Dir an:

https://jsfiddle.net/c7b5fj9p/

Oder möchtest Du etwas anderes?

Nebenbei, Deine Struktur ist falsch
Du hast:
Code:
<p style="text-indent:96px;"><span style="border:1px solid #b51639;padding:10px;"><a href="http://xxx.at/albums/"><a href="" id="id1" onmouseover="document.getElementById('id1').style.color='white'"
onmouseout="document.getElementById('id1').style.color='#b51639'"> Hörproben </a></span></p>
<html>
<head>
<style type="text/css">
a:hover { background-color: #b51639 }
</style>
</body>
</html>

Die richtige Struktur lautet:
Code:
<html>
<head>
             hier Styles, Javascript etc rein
</head>
<body>
             hier das HTML rein
</body>
</html>
 
Zuletzt bearbeitet:
Zurück
Oben