CODEWITHSUNDEEP
htmlcss
Gallae
Gallae

Reputation: 3

Exclude one part of header from CSS stylesheet?

I'm learning HTML5 and CSS and am making a basic portfolio website for my D&D characters to test what I know so far. I'm using an image link to redirect back to my index.html page, and some basic text links to redirect to my other pages. I want my text links to have a white background when you hover over them, but whenever I put

header a:hover{
    background-color: white;
    color: lightpink;
}

in my CSS file, the image link shows a white background in the padding underneath the image when hovered over, which I don't want. Is there any way to have the image link specifically ignore this CSS style while the text links abide by it?

Upvotes: 0

Views: 155

Answers (1)

ray
ray

Reputation: 27285

I'm not entirely sure I understand the question, but if you have a link containing text and an image and you want the hover rule to affect just the text, wrap the text in a span (or whatever) and apply the hover rule to the span.

<a href="#">
  <span>Hover Effect on This</span>
  <img src="no-hover-effect-on-this.png" />
</a>

a span:hover {
  background: white;
}

Upvotes: 2

Related Questions