CSS/HTML a:hover Farbe nur bei einem link?

Ich möchte die "hover-Farbe" nur bei einem link ändern. Wie geht das ?

3 Antworten

DodgeRT

14.07.2022, 15:11

gib dem link einfach ne andere class und definier die dann im css...

germanils

14.07.2022, 15:13

Indem Du die Anweisung nur diesem Link zuordnest.

Du meinst, es soll nicht für alle <a> gelten, sondern nur für einen bestimmten?
Dann gib dem eine Klasse und weise die CSS-Anweisung dieser Klasse zu:

<a class="farbig">Link</a>

a.farbig:hover {color:red};

Woher ich das weiß:Berufserfahrung – Entwicklung von Apps und Websites

ChrisCat1, UserMod Light

14.07.2022, 15:13

Du kannst dem Link eine Klasse oder ID geben.

<a href="#" class="MeineKlasse" id="MeineID">Link</a>

CSS

a.MeineKlasse:hover {}
a#MeineID:hover {}

Ähnliche Beiträge

Wie kann ich den Inhalt einer Border färben HTML&CSS?

Wie kann ich den Inhalt einer Border in eine bestimmte Farbe ändern (in CSS oder HTML)?

...zum Beitrag

Farbe automatisch ändern-CSS/HTML?

Hallo, ich möchte, dass meine Überschrift die Farbe wechselt, aber nicht der Hintergrund, sondern die Buchstaben selber. Wie funktioniert das?

...zum Beitrag

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

HTML Akkordeon Problem?

Hallo

Ich habe ein Problem mit dem CSS:
- Ich möchte den HOVER des Buttons in dieser Farbe: #2C6194 und Text nicht blau
- und wäre es leicht das responsive anzupassen?
Bild oben und Text unten auf dem mobile?
Hier der Quelltext: HIER

Danke für die Mithilfe! Komme leider nicht weiter....

...zum Beitrag

CSS + Hover + WP - Wie gleichzeitig Rahmen & Text hovern?

Hallo Community :)

Ich habe einen Rahmen mit Text (ein Link)

Wenn ich mit der Maus über den Rahmen gehe kommt ein Hover-Effekt (Rahmen-Farbe verändert sich).

Wenn ich dann weiter in die Mitte des Rahmens gehe bis zum Text (ein Titel mit Verlinkung), dann verändert er erst seine Text-Farbe

Ich möchte aber, dass sobald ich den Rahmen mit der Maus berühre, dass sowohl Rahmen UND Text den Howereffekt bekommen

Habt Ihr dafür eine Lösung?

.rahmen { border: 8px solid blau; }

.text a { color: blau; padding 40px 40px 40px 40px; }

.rahmen:HOVER { border: 8px solid rot; }

.text a:HOVER { color: rot; }

...zum Beitrag

HTML CSS Hover Animation?

Hallo. Ich versuche eine eigene Website zu erstellen mit HTML und CSS. Nun bin ich auf ein Problem gestoßen. Ich versuche seit langem eine Hover Animation auf ein Text einzufügen. Den CSS Code habe ich von der Webseite ui-snippets.dev . Ich bekomme die Hover Animation nicht zum Funktionieren. Die Animation kommt nur wenn ich beim content ein Text eingebe. Dann ist aber die Animation viel zu groß, da die große vom eingegeben Content Text benutz wird.

Bilder vom Code im Anhang.

...zum Beitrag

html: wie button zentrieren und farbe ändern?

hallo, wie kann ich in html einen button, den ich wie folgt gemacht habe, zentrieren und die farbe ändern.

html:<a href="https://wakeuprecords.zohobookings.eu/#/wakeuprecords">
<button>Buche deine Session hier</button>
</a>
css:.button {
text-align: center;
}
button {
font-size: 20px;
background-color: yellow;
cursor: pointer;
color: green;
}

hab ich irgendwo einen fehler oder muss man das anders machen, den bei mir ändert sich gar nichts.

...zum Beitrag

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zum Beitrag

Wie kann ich bei diesem Icon die Farbe ändern in CSS 3?

Ich möchte die Farbe ändern aber es funktioniert nicht mit hover, visited, link usw. Hat jemand eine Idee? P.S. das Icon ist von Fontawesome. Mit der Frage meine ich die Lupe am rechten Rand.

...zum Beitrag

CSS: Wie kann ich bei Hover die Hintergrund- und Schriftfarbe ändern lassen?

Hallo zusammen,

ich würde gerne in diesen Code eine Hover-Funktion einbauen. Da ich Neuling bin, hoffe ich, dass ihr mir die Unbeholfenheit verzeiht.

Bei Hover sollte sich die Hintergrundfarbe und wenn möglich die Schriftfarbe ändern:

*#dm *.dmBody div.u_1159973834 {
  background-color: rgba(255, 255, 255, 0.35) !important;
  border-style: solid !important;
  border-width: 2px !important;
  border-color: rgba(255, 255, 255, 1) !important;
}

Besten Dank für eure Zeit!

...zum Beitrag

Wie kann man in HTML mit CSS einzelne Linkfraben ändern?

Hallo :)

Ich arbeite gerade an einer Website. Ich habe für das .html Dokument die Links alle als color: white definiert. Nun möchte ich aber einzelne Links einer div class in Farbe color: black haben.

Weiß jemand wie ich die einzelnen Linkfarben ändern kann?
Danke :)

...zum Beitrag

Mouseover - Farbe von Bild ändern?

Hey ich möchte in einem HTML Code angeben, dass ein Bild über das die Maus fährt rot eingefärbt wird. Soll also so ein leichter transparenter Schleier werden. Dass ich sowas machen musste ist schon etwas her, daher bin ich etwas überfragt.

Ich hätte das nur mit CSS lösen können, wie ich das in den HTML Code schreibe weiß ich nicht mehr. (a hover)

Das wäre der Code:

Wäre echt nett wenn man mir helfen kann:D

...zum Beitrag

Gehen CSS-Animationen auch rückwärts nach Hover?

Hallo!

Ich habe eine CSS-Animation, die bei Hover ein Element vergrößert. Wenn man die Maus wegbewegt ändert sich die Größe direkt ohne Animation wieder zurück. Wie kann man die Animation beim Webbewegen des Cursers wieder rückgängig abspielen lassen?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen