Do the below. You just have to inverse your brains logic a little bit to set it to none, where you need it to be none.

a:hover .linkHeader {
  text-decoration: none;
}

There are many approaches to solving this, but the most straightforward is to place the <a> anchor text inside the <h4> heading like this:

<h4 class="linkheader"><a href="dieren.html#honden">Honden</a></h4>

and then use the following three style declarations:

a {
color: rgb(0, 127, 0);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.linkheader a,
.linkheader a:hover {
color: rgb(0, 0, 0);
text-decoration: none;
}

Note that as you move down the stylesheet, each selector is more specific than the previous selector. That is:

• a:hover is more specific than a
• .linkheader a:hover is more specific than a:hover

That’s a good general rule of thumb of CSS architecture:

• Start with the most general style declarations and move on to more specific cases

Working Example:

a {
color: rgb(0, 127, 0);
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.linkheader a,
.linkheader a:hover {
color: rgb(0, 0, 0);
text-decoration: none;
}

<!-- link that should be green and shouldn't have an underline unless a mouse hovers -->
<a href="dieren.html">overzicht</a>

<!-- link that should be black and never underlined -->
<h4 class="linkheader"><a href="dieren.html#honden">Honden</a></h4>
<h4 class="linkheader"><a href="dieren.html#katten">Katten</a></h4>

I have two types of links: links where I want the color to be green and underline only when the mouse hovers over it, and another type of link where the color is black and there is never any underline. The problem is, when I try to style this functionality, the hover always displays a green underline under the black link. The :not() class doesn’t seem to work.

html code:

<!-- link that should be green and shouldn't have an underline unless a mouse hovers -->
<a href="dieren.html">overzicht</a>

<!-- link that should be black and never underlines -->
<a href="dieren.html#honden"><h4 class="linkheader">Honden</h4></a>
<a href="dieren.html#katten"><h4 class="linkheader">Katten</h4></a>

css code:

.linkheader {
    color:#000000;
    text-decoration: none;
}

a {
    color:#339933;
    text-decoration: none;
}

a:not(.linkheader):hover {
    text-decoration: underline;
}

EDIT: I fixed it by putting the class=”linkheader” in the html line from the h4 element to the a element. The elements now look like this:

<a href="dieren.html#honden" class="linkheader"><h4>Honden</h4></a>
<a href="dieren.html#katten" class="linkheader"><h4>Katten</h4></a>

Then, on a commenter’s suggestion, I changed a:hover to this:

a:not(.linkheader):hover {
    text-decoration: underline;
}