A:hover help

HTML & CSS
1

Hello,

So I’m having a weird issue where I have links set to do this on hover:

a:hover {
		background-color: #f1f8fe;
		border-bottom: 2px solid #e3f1fd;
		color: #167cce;
		}

My problem is, when I use an image as the link, the hover rules apply to it, this is fine, however when I attempt to stop this from happening with other rules, they do not apply. What rule should I set?

2

Are the other rules set above or below that in the CSS file. I believe where a rule is within the css file has an impact on which rule takes precidence

3

Yeah I figured that, even if I set the rule below, it still has no effect. I’m not too sure how to go about this.

4

All the others prob won’t show so the only one you prob need to override is the border.

a.image:hover {border:none;}

5

That didn’t work. Basically, when I hover the image it displays a block of highlighted text - as intended by the background-color. Even by using text-indent: -9999px; it doesn’t fix it (thinking there could be some possibility of text behind the image?)

6

The problem is BOTH a specificity and source order(html) issue

a:hover {
background-color: #f1f8fe;
border-bottom: 2px solid #e3f1fd;
color: #167cce;
}

Changes those attributes for all hovered links

a:hover img{
background-color: #f1f8fe;
border-bottom: 2px solid #e3f1fd;
color: #167cce;
}

Changes those attributes for all images WITHIN hovered links

BUT, CSS cant tell what As contain IMGs. It’s just not possible. So you CAN change the attributes of the image… but the ones on the anchor still remain, which is what you are seeing and then assuming that it the browser is not applying your CSS.

You will need to create a class for when an anchor wraps an image and you dont want those rules followed.

<a class=withimage" href=“#”><img src=“myimage”></a>
.withimage:hover{ your rules}

7

Thanks for the reply, so I’ve tried this:

<a class="clickimage" href="#" title="Click here"><img src="images/click.jpg" alt="click here button"></a>

.clickimage:hover {
		background-color: none;
		border-bottom: none;
		color: none;
		}

So, it works, however I’m still getting a white block behind the image, which I’m assuming would be the background color. I’m not entirely sure but I think I’ve missed something.

8

could you provide a link to your work ? I am not clear what you mean by “white block” or “background color”.

9

You can set “outline:none” to remove white border.

10

outline: none didn’t seem to work, thanks though.

link is here - http://www.dbelldesign.com.au/newsite/services.html

Edit: Please note that I have removed the code for now to show the original problem.

11

Assuming you use this code, just change background-color: none; to background-color: transparent;
Transparent is the default value for background-color, whereas none is not a valid value.

12

Well spotted :slight_smile: and the same applies to color (border-style is ok with none as a value though).

I think the Op must have been confused with the shorthand rule “background:none” as the “none” refers to the image and all other shorthand values are then set to default (of which background-color would be transparent).

13

Ahh so simple. I never knew that none was not valid and that it was transparent for both, thank you so much, I got it working. Thanks to everyone else who helped me out. This can be locked now.