CODEWITHSUNDEEP
htmlcssxhtml
Mickel
Mickel

Reputation: 6696

Probobly a rather simple CSS Problem

I have this CSS-rule to get the "pushed-down" effect on pressed links:

a:active {
    position: relative;
    top: 1px;
}

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

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

Is it possible?

Thanks.

Upvotes: 1

Views: 89

Answers (4)

mdubulous
mdubulous

Reputation: 15

Unfortunately there is not yet a selector to differentiate text only links to image links. However you could get away with this:

p a:active {
    position: relative;
    top: 1px;
}

If your links are all contained within paragraph tags this will work, and will not affect your image tags. You could create one for H1, H2, etc for any tags you need to include.

Upvotes: 0

qw3n
qw3n

Reputation: 6334

I haven't tried this, but I think it should work.

a:active {
    position: relative;
    top: 1px;
}

a:active img{
    position: relative;
    top: -1px;
}

The other solution is to add a class to the all the a tags that contain images

Upvotes: 1

derekerdmann
derekerdmann

Reputation: 18252

I believe you could change your initial style to:

a {
    padding-bottom: 1px;
}

a:active {
    padding-top: 1px;
    padding-bottom: 0;
}

and then use this for the image:

a:active img {
    position: relative;
    top: -1px;
}

Haven't had a chance to test it yet, but I think this should do it.

Upvotes: 1

strager
strager

Reputation: 90012

You can reverse the effect on the child:

a:active img {
    position: relative;
    top: -1px;
}

Upvotes: 5

Related Questions