Override Anchor > Image Behavior with CSS

Note: I asked a similar question 5 minutes ago, however this 开发者_如何转开发is not the same...

I have this CSS-rule to underline links without striking through any of the letter's "foots":

a:hover, a:focus, a:active {
    color: #3b234a;
    border-bottom: 1px #ccc solid;
}

Now this works as expected, however I want to write a rule that disable this behavior on linked images as this one:

<a href="#"><img src="..." /></a>

Is it possible?

Thanks.

Add a class "imageLink" or whatever you like to anchors that hold images then:

a:hover, a:focus, a:active {
  color: #3b234a;
  border-bottom: 1px #ccc solid;
}

a.imageLink:hover, a.imageLink:focus, a.imageLink:active {
   border-bottom: none;
}

Try

a:hover img { border-bottom: none; }

Apply a class to your href and remove the border on that class.

Basically you're always going to have to come at this with the parent element in mind because that's the direction that CSS is parsed in.

You can move backwards from child to parent if you use jQuery or similar, but vanilla CSS can't handle what you want it to do in this situation.