• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

:hover möchte nicht wie ich möchte

arkadiuszpaluszek

arkadiuszpaluszek

Mitglied
Hallo! Habe eine Tabelle, bei der der Hintergrund einen Farbverlauf hat, die einzelnen Tabellenzellen Links beinhalten. Nun möchte ich gerne, dass die Tabellenzellen der Klasse ""menu_td" die Farbe wechseln wenn ich mit der Maus drüber fahre.
Code: 
.menu_last_td {
            background: -webkit-linear-gradient(chocolate, sandybrown); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(chocolate, sandybrown); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(chocolate, sandybrown); /* For Firefox 3.6 to 15 */
            background: linear-gradient(chocolate, sandybrown); /* Standard syntax (must be last) */
            height: 44px;
            cellspacing: 0px;
            font-size: 16px;
        }
        .menu_table {
            border-spacing: 0px;
            width: 100%;
            table-layout: fixed;
        }
        
        .menu_td {
            background: -webkit-linear-gradient(chocolate, sandybrown);
            background: -o-linear-gradient(chocolate, sandybrown);
            background: -moz-linear-gradient(chocolate, sandybrown);
            background: linear-gradient(chocolate, sandybrown);

            height: 44px;
            width: 150px;
            cellspacing: 0px;
            font-size: 16px;
            color: white;
        }
        a:link {color: #000000;}
        a:visited {color: #000000;}
        .menu_td:hover {
            background-color: yellow;
        }

Funzt aber nicht. Habe gelesen, dass die Beschreibung von :hover nach :link und nach :visited folgen muss, was hier auch der Fall ist. Trotzdem funktioniert es nicht. Hat jemand eine Idee warum?
 
Das hier sollte dir weiterhelfen:
https://stackoverflow.com/questions/14116689/animating-a-css-gradient-background-on-the-hover-event

Kleine Info:
Hovers bei linear-gradient sind (noch) nicht unterstützt. Aber der Link verweist auf eine Seite, die zumindest eine kleine Lösung hat.
Ich selber habe aber noch nie mit dieser Methode gearbeitet. Schau dir mal an, ob das was für dich ist und ob es bei die überhaupt funktioniert.


Edit:
Moment...
Nach dem ich nochmal googlen wollte, ist mir das hier ins Auge gesprungen:
https://stackoverflow.com/questions/43075853/linear-gradient-on-hover
Der Beitrag ist noch relativ neu und liefert glaube ich eine bessere Lösung. Ich bin momentan auf dem Handy unterwegs und kann es schlecht nachprüfen
 
Zuletzt bearbeitet:
Vielen Dank für eure Beiträge!

Ja, :hover geht beim Farbverlauf wohl tatsächlich nicht. Den Farbverlauf möchte ich aber haben.

Habe mich letztlich entschieden einen anderen Effekt zu nutzen, d.h. beim Mouseover einen blauen Balken am oberen Rand der Zelle anzeigen zu lassen durch jQuery:
Code: 
function background_mouseover(id) {
            $("#" + id).css("border-top", "5px solid deepskyblue");
        }
        function background_mouseout(id) {
            $("#" + id).css("border-top", "");
        }

Der Hintergrund bleibt also unverändert, durch den Balken der hellblau aufleuchtet wird das Element trotzdem hervorgehoben.
 
Schau dir doch tronjers Beitrag an. Mit Javascript/Jquery ist es in der Tat möglich einen Hover-Effekt zu erzeugen.
 
In welchen Browser ghet es denn nicht?
Also, im FF und Chrome geht's. Oder habe ich was falsch verstanden?
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>

<style>

nav {
 display:flex;
  background:#333;
}

nav a {
 padding:10px;
 color:#fff;
 background: -webkit-linear-gradient(chocolate, sandybrown);
 background: linear-gradient(chocolate, sandybrown);
}

nav a:hover {
 background: -webkit-linear-gradient(red, black);
 background: linear-gradient(red, black);
}

</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">Über uns</a>  
<a href="#">Konzept</a>
<a href="#">Impressum</a>
</nav>  
</body>
</html>
 
Mmh,
laut meinen Infos (und meinem mitgeschickten 2. Link) gibt es aber anscheinend Komplikationen mit manchen Browsern (welche weiß ich nicht).
Der Beitrag ist auch erst Mai diesen Jahres entstanden und ich glaube, es gab keine Updates für CSS, welche eine vollständige Unterstützung anbieten.

Aber wenn es bei die funktioniert, könnten wir das mal in allen Browsern testen und schauen, ob es vielleicht doch einen vollständigen Support gibt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben