css a:link style text und Bilder

Habe ich einen quick css Fragen, das nervt mich, und ich kann nicht scheinen, um herauszufinden, jetzt.

Habe ich stylte die links auf meiner Seite zu haben, der einen unteren Rand auf, die auf schweben, aber es der unteren Grenze erscheint auf dem Bild, die haben auch links, und ich kann nicht herausfinden, wie die Grenze aus, die auf den Bildern.

Hier ist, was ich derzeit habe.

#main a:hover {
    border-bottom:solid 1px #7b9a04;
    color:#333;
}

img, img a:hover {
    border-bottom:none;
}

Allerdings scheint dies nicht zu funktionieren. Ich glaube nicht, dass es einen anderen Stil überschreiben, denn wenn ich entfernen Sie die #main a:hover-Stil die Bilder haben nicht mehr die untere Grenze, aber keiner von den anderen links auf der Seite gehen dann.

  • Gut, img a:hover definitiv nicht funktionieren, da img - tags können nicht Nachkommen.
  • a img:hover oder a:hover img sind besser 🙂 Jedenfalls border-bottom auf einen link... ist es nicht ein text-decoration:underline, weißt du... Standard-Stil für einen link.
  • Lieber benutze ich border-bottom, weil es geben Ihnen ein wenig mehr Möglichkeiten als nur text-Dekoration:unterstreichen. Mit dem Rahmen können Sie die Dicke und machen es in einer anderen Farbe, dann der text insgesamt.
  • Wenn Sie kommen zurück zu dieser, ich denke, Sie sollten daneben immysl Antwort als Lösung.
InformationsquelleAutor Adam | 2010-09-21
  1. 5

    Ist das problem mit dem link-element <a>, nicht mit dem Bild-link selbst. Wenn Sie angeben, dass eine untere Grenze für den hover-Zustand der <a> gilt Sie auch für den link, das das Bild enthält. Also, wenn Sie die Maus auf so einen link (mit einem Bild), es ist der link zeigt, dass die border-bottom. Nicht das Bild.

    Gibt es eine Lösung für dieses wenn. Versuchen Sie die Anwendung:

    a img {
    display: block;
    }

    Damit setzt die <a> styling. Gibt es eine Einschränkung für diese Methode — mit diesem mit inline-Bildern bricht das layout. So verwenden Sie es sparsam.

    • Dieser arbeitete für mich. Wie Sie bereits erwähnt, ich denke, die anderen Antworten hier nicht erkennen, dass das problem mit dem link, nicht mit dem Bild.
    • Dies scheint wie ein ziemlich mieser workaround, da es zwingen wird, alle Ihre Bilder mit links werden standardmäßig sperren Recht? Würde eine bessere option sein, setzen eine bestimmte Klasse auf <a> Elemente, die Verknüpfung von aus-Bildern und den Gegner es so?
    InformationsquelleAutor immysl
  2. 0

    Wie etwa

    a[href$=jpg]:hover, 
a[href$=jpeg]:hover, 
a[href$=png]:hover, 
a[href$=gif]:hover {
        text-decoration: none;
        border: 0;
        border: none;
        }
    InformationsquelleAutor Daltro Borowski
  3. -1

    Laut css-Spezifität es sollte funktionieren, solange Sie setzen die Bild-Rand css nach die anderen css.

    Nebenbei es gibt keine Notwendigkeit, haben p und td getrennt so.

    #main a {
    color:#7b9a04;
    text-decoration:none;
}

#main a:hover {
    color:#333;
    border-bottom:solid 1px #7b9a04;
}

    Ist wirklich alles, was Sie brauchen.

    • Danke für den Tipp. Ich bin immer noch mit dem problem und die Umrandung des Bildes kommt nach der anderen link-Stil. Vielleicht ist es eine Art caching-problem. Ich werde versuchen, es auf einem anderen Rechner in den morgen.
    InformationsquelleAutor Galen
  4. -1

    was zum expliziten Definition Bilder haben keine Grenze, nach der hover-Erklärung?

    #main a:hover {
  border-bottom: solid 1px #7b9a04;
}

img {
  border: none;
}
    • Scheint nicht zu helfen. Ich bin an einem Verlust auf diese.
    • können Sie entweder teilen sich ein link zu Ihrer Seite oder teilen Sie Ihre html/css, gibt es eine Möglichkeit, das etwas anderes überschreiben, ist es
    • Ich glaube nicht, dass das funktioniert, da der Rahmen wird angewendet, um den link, nicht das Bild.
    InformationsquelleAutor the_e
Schreibe einen Kommentar