<h3> Link soll ein anderes Styling bekommen als alle anderen Links

[Guenny0815]

Hallo Zusammen,

ich habe mal wieder ein kleines Problem an dem ich nicht weiterkomme.

Ich habe Links die beim Hover ein wenig Dicker und unterstrichen dargstellt werden sollen. Das funktioniert auch.

Jedoch möchte ich das nicht für Überschriften (H3) die ebenfalls Link enthalten, da diese ja bereit fetter Dargstellt sind.

Jedoch bekomme ich das nicht hin. :-(

Ich habe folgenden CSS Code:

.h3-nav{
    font-family: Arial;
    color: #00B388;
}

a:visited, a:link, a:active
{
    text-decoration: none;
    color: #00B388;
}

a:hover{
color: #00B388;
text-decoration:underline;
font-weight:bolder;
}

h3 a:hover{
color: #00B388;
text-decoration:underline;
}

und folgenden HTML Ausschnitt:

<h3 class="h3-nav"><a href="../index.html">Home</a></h3>

<ul class="ul-navi">
     <li><a href="link1.html">Link1</a></li>
     <li><a href="link2.html">Link2</a></li>
     <li><a href="Link3.html">Link3</a></li>
     <li><a href="Link4.html">Link4</a></li>
</ul>

Wer kann helfen?

Grüße

Guenny0815

[Dragon8]

Eine Überschrift h3 hat für text-weight standardmäßig den Wert bold. Entweder änderst du also für alle links die Eigenschaft text-weight auf bold, dann muss du die Überschriften nicht extra beachten. Ansonsten musst du entsprechend für die Überschriften mit Links extra angeben, dass diese eben nicht den Wert bolder bekommen sollen.

h3 a:hover {
	font-weight: inherit;
}

sollte dafür reichen. Dadurch erbt der Link den Wert der Eigenschaft font-weight vom Parent h3.

Bearbeitet 10. Februar 2016 von Dragon8

[Guenny0815]

So einfach kann das sein.

Vielen Dank. Das funzt.

Schönes Wochenende.