Solution 1 :

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 span:hover {
  background: white;

Problem :

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?


Comment posted by ezio4df

u need more specific selector. whats the html ? cant help without it.