Wie link_to Links verfärben sich auf schweben

Ich versuche zu bekommen 3 meiner Links machen Farbe auf schweben hier zu ändern, ist die CSS, die ichWie link_to Links verfärben sich auf schweben

a { 
    color: #5c8a36; 
} 

a:hover { 
    text-decoration: none; 
    color: #5c8a36; 
} 

.home_links:hover, 
.home_links:focus { 
    color: #5c8a36; 
}

<%= link_to "Business Development", business_development_path, :class => 'home_links', :style => 'color: white'; %>

Aus irgendeinem Grund haben mit Bei diesem Setup ändert sich der Link beim Hover nicht. Ich bin mir nicht sicher, was ich tun soll, damit es funktioniert. Irgendwelche Vorschläge werden geschätzt.

EDIT: Ich möchte diese spezifischen Links weiß und dann auf den Hover ändern Farbe auf die gleichen wie den Rest der Links.

Quelle

2016-06-02 ncrouch25

Ich glaube, Inline-Stile haben Vorrang vor Stilen in CSS definiert. Entfernen Sie das Stilattribut aus Ihrem Markup. –

Sie tatsächlich ** CAN ** Überschreibung Inline-Styling (nützlich für die Elemente dynamisch generiert). Überprüfe meine Antwort. –

Verwendung dieses es für Sie arbeitet

<%= link_to "Business Development", business_development_path, :class => 'home_links', :style => 'color: white'; %> 



    <style type="text/css"> 
     .home_links:hover{ 
      color:#57a22b!important; 
     } 
    </style>

Quelle

2016-06-03 13:08:30 CodeMaker

Der Inline-Stil :style => 'color: white'; hat Vorrang vor externen oder internen Stilen. entfernen Sie es für Ihre CSS-Effekt nehmen

Quelle

2016-06-02 20:13:01 Chief

wie Sie beide Sieht aus den Hover angegeben haben, und nicht-Hover-Arten die gleiche Farbe sein. Sie müssen den Hover-Stil ändern, um die Änderung zu sehen.

Quelle

2016-06-02 20:13:31

Ich habe alle Links auf der Website eingestellt, dass Farbe. Ich möchte jedoch, dass diese Links weiß erscheinen und auf dem Hover die gleiche Farbe wie der Rest der Links erscheinen. Ich bin mir nicht sicher, wie man erreichen, dass – ncrouch25

Ah, entschuldige mich, in diesem Fall werden Sie den Inline-Stil entfernen möchten, der die Standardfarbe auf Weiß setzt, und sie stattdessen im Stylesheet angeben. Inline-Stile haben Vorrang, das heißt, Sie werden nie den externen Stil sehen. –

Hier ist ein aktualisiertes Beispiel: http://codepen.io/JasonGraham/pen/MewYJg –

Haben Sie versucht:

a.home_links:hover{ 
    color:#57a22b !important; 
}

oder die Inline-Stil entfernen und es zu Ihrem CSS wie folgt hinzu:

/* unvisited link */ 
a:link { 
    color: red; 
} 

/* visited link */ 
a:visited { 
    color: green; 
} 

/* mouse over link */ 
a:hover { 
    color: hotpink; 
} 

/* selected link */ 
a:active { 
    color: blue; 
}

Quelle

2016-06-02 20:13:35 JCB507

Entweder das Inline-Styling mit einem !imporant Tag wie folgt außer Kraft setzen

a.home_links { 
    color: white; 
} 

a.home_links:hover { 
    text-decoration: none; 
    color: #5c8a36; 
} 
a.home_links:focus { 
    text-decoration: none; 
    color: #5c8a36; 
}

Oder wenn die Elemente dynami sind matisch erzeugt zusammen mit dem Inline-Styling, dann können Sie die Inline-CSS mit einem Selektor wie dies außer Kraft setzen:

a.home_links[style]:hover { 
    color: #5c8a36 !important; 
}

Example Fiddle die Überschreibung Trick Selektor

Quelle

2016-06-02 20:18:52

Wie link_to Links verfärben sich auf schweben

Antwort

Verwandte Themen