Hi all
I have a background picture for when the mouse is moved over a link the image will appear, but I only want it to appear for text, not for images.
Here is the coding:
a:hover { color: blue;
background: #30CCFF url(images/href_Background.gif);
background-repeat: repeat-x;
}
Tried this
a:hover img { background-image: none; }
But there must be something wrong, can someone help me?
Thanks in advance for any help!!It should, instead be:
a img:hover { background-image: none; }
Also, I got a similar thing working once, and found that when I rolled over, it gave a flickering effect, which is very annoying.
-Dannote that img:hover will only work in browsers.Originally posted by Sam
note that img:hover will only work in browsers.
Yeah, you'll have to make the image a background image for the anchor, and style the anchor like this:
a {
background: #fff ulr("images/image.gif");
display: block;
width: <image width />px;
height: <image height />px;
}
-DanThanks guys!!
It does indead flicker, but the background image is still appears under the images.
would I be able to use a class instead?
before I changed it to what you said to do, it only shows in Opera. but on some images I can get around it by changing the background transparancy on the image to white for all browsers except opera.
note that img:hover will only work in browsers.
I assume you mean it will not work with screen readers, braille readers etc, I do not care if it can not work on these and only want it to work with browsers for astheticly pleasing look.I assume you mean it will not work with screen readers, braille readers etc, I do not care if it can not work on these and only want it to work with browsers for astheticly pleasing look.
I suspect he means it will not work in IE.Originally posted by ray326
I suspect he means it will not work in IE.
IndeedI suppose I have Microsoft to thank for that!
One way I have thought of to get around it is to use a class, but I have never used a class with a pseudo before. How is this done?
Thanks to all for helpinga class isn't what you want here. Take a look at Dan's proposition. A background image is the best solution I can think of as well.Sorry but it is not working.
here is a before and after screen shot of what is wrong
this is before I tried your code
see attachment)and here is the after your code screen shotsee Attachment)
These are both for IE6smercer wrote... changing the background transparancy on the image to white for all browsers except opera.
So only Opera has a problem.
If you add a class to the text anchors(class="txt"), use:
a[class="txt"]:hover {background:url(myimage.gif);}
This works for Opera and Moz., but not IE.
The changed transparancy of the image is the solution for IE.I managed to fix it. I went to a web site (<!-- m --><a class="postlink" href="http://codepunk.hardwar.org.uk/bcss08.htm">http://codepunk.hardwar.org.uk/bcss08.htm</a><!-- m -->) (after searching) with a tutoral about this and changed code to:
a.aimg:hover {
background-image: none;
background-color: transparent;
}
and it now works
I have a background picture for when the mouse is moved over a link the image will appear, but I only want it to appear for text, not for images.
Here is the coding:
a:hover { color: blue;
background: #30CCFF url(images/href_Background.gif);
background-repeat: repeat-x;
}
Tried this
a:hover img { background-image: none; }
But there must be something wrong, can someone help me?
Thanks in advance for any help!!It should, instead be:
a img:hover { background-image: none; }
Also, I got a similar thing working once, and found that when I rolled over, it gave a flickering effect, which is very annoying.
-Dannote that img:hover will only work in browsers.Originally posted by Sam
note that img:hover will only work in browsers.
Yeah, you'll have to make the image a background image for the anchor, and style the anchor like this:
a {
background: #fff ulr("images/image.gif");
display: block;
width: <image width />px;
height: <image height />px;
}
-DanThanks guys!!
It does indead flicker, but the background image is still appears under the images.
would I be able to use a class instead?
before I changed it to what you said to do, it only shows in Opera. but on some images I can get around it by changing the background transparancy on the image to white for all browsers except opera.
note that img:hover will only work in browsers.
I assume you mean it will not work with screen readers, braille readers etc, I do not care if it can not work on these and only want it to work with browsers for astheticly pleasing look.I assume you mean it will not work with screen readers, braille readers etc, I do not care if it can not work on these and only want it to work with browsers for astheticly pleasing look.
I suspect he means it will not work in IE.Originally posted by ray326
I suspect he means it will not work in IE.
IndeedI suppose I have Microsoft to thank for that!
One way I have thought of to get around it is to use a class, but I have never used a class with a pseudo before. How is this done?
Thanks to all for helpinga class isn't what you want here. Take a look at Dan's proposition. A background image is the best solution I can think of as well.Sorry but it is not working.
here is a before and after screen shot of what is wrong
this is before I tried your code
see attachment)and here is the after your code screen shotsee Attachment)These are both for IE6smercer wrote... changing the background transparancy on the image to white for all browsers except opera.
So only Opera has a problem.
If you add a class to the text anchors(class="txt"), use:
a[class="txt"]:hover {background:url(myimage.gif);}
This works for Opera and Moz., but not IE.
The changed transparancy of the image is the solution for IE.I managed to fix it. I went to a web site (<!-- m --><a class="postlink" href="http://codepunk.hardwar.org.uk/bcss08.htm">http://codepunk.hardwar.org.uk/bcss08.htm</a><!-- m -->) (after searching) with a tutoral about this and changed code to:
a.aimg:hover {
background-image: none;
background-color: transparent;
}
and it now works