HTML Button füllen bei Mousover

Mädchen · 6. März 2020

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>
 

pcBauer · 6. März 2020

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.

nierewa · 9. März 2020

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>

Mädchen · 10. März 2020

Hi, danke, aber es funktionier beides nicht 😔

nierewa · 11. März 2020

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>

Mädchen · 15. März 2020

Perfekt, vielen Dank

Suche

Mädchen

Newbie

pcBauer

Lieutenant

nierewa

Lt. Junior Grade

Mädchen

Newbie

nierewa

Lt. Junior Grade

Mädchen

Newbie

Ähnliche Themen