CSS rules for hover conflicting

  • I have my links outlined on hover using this CSS in the twentytwelve theme:

    a:hover {
	text-decoration: none;
	outline: solid;
	outline-width: thin;
	color: #235b20;
	padding-right: 2px;
	padding-left: 2px;
}

    but for linked images this makes a small outlined box appear on hover at the bottom of the image, not around the image. This CSS makes a dashed outline appear around the image on hover:

    a:hover img{
	outline: dotted;
	outline-width: thick;
	color: red;
}

    but it doesn’t get rid of the small green box. I get the small green box with or without image titles. I’m working offline so I can’t link to the site.

    Any ideas as to why the second bit of CSS doesn’t override the first?

    Thanks, Ann

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi Ann,

    To override a css property use !important.
    See explanation here: https://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    9 times out of 10 you don’t want to use !important because it creates a huge chain reaction of using !important to override styles.

    You can usually get away with overriding styles by using CSS specificity
    https://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    Best practice will be Child theme.
    But I was simply answering him ‘how to override’.

    And in my above mentioned link, author clearly states:

    NEVER
    !important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.

    Thread Starter annmari1

    (@annmari1)

    Thanks — I am using a child theme. What I don’t understand is why the second CSS that applies to img doesn’t override the first that applies to all a:hover. . It comes later in the file and it’s more specific, right?

    This a:hover is targeting <a> on hover.

    This a:hover img is targeting <img> that is a child of <a> on hover.

    So the outline on <a> hover still apply.

    Thread Starter annmari1

    (@annmari1)

    Thanks paulwpxp, that’s exactly right. I found a workaround: 

    a:not(img) a:hover{ ...
}

    to define the box around text and 

    a:hover img{ ...
}

    to put the box around the image. What’s odd is that the box created by a:hover is the right width for the image but not the right height.

    Found the fix through stackoverflow here: nerd in progress

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS rules for hover conflicting’ is closed to new replies.