Forum Moderators: not2easy
I know how to create a class that makes the background color transparent on hovers. But that isn't what I'm looking for.
In my html below, we have orange text on a black background. Links show up as white, but when the pointer is over them, they show up as red on a blue background. Fine and dandy - EXCEPT I *don't* want the blue background to show through the invisible gif.
- I want the entire area from the start of the image to the end of the word "link" to be a link.
- I want the text to show up as blue-on-red in a hover situation.
- I want the gif to appear unchanged in a hover situation.
Nothing I've found on the web has come close to helping. This thread from last year [webmasterworld.com] has some ideas, but they didn't accomplish what I wanted (see above). Birdman's solution in there confused me as he used "img" as a class name.
The example here is a greatly-simplified portion of something else I'm working on. In my bigger page that I'm doing, I know I could fudge things by making the gif's non-transparent, with their backgrounds matching the color of the area where they'd be on the screen, but I'd like to avoid that hack if I could.
What can/should I do?
<html>
<head>
<title>Untitled</title>
<style>
body { background-color: black; color: orange }
a:link, a:visited { color: white }
a:hover {background-color: blue; color: red }
</style>
</head>
<body>
<p>
A paragraph that contains a <a href="foo.html">link</a> and<br>
an image <a href="foo.html"><img alt="99welcome.jpg (2K)" src="foo.gif" height="30" width="30" border="0">and a link</a>
</p>
</body>
</html>
You are on the right track. Simply add another rule for the image:
a img {
background-color: black;
}
This way the image will have its own background color, which will remain unchanged :)
If I use your suggestion, then I am "hardcoding" all images in anchors to have a black background. I want them to be transparent though, so the background shows through them. In IE 6 anyway, the nonexistent source foo.gif shows up as a transparent gif, which makes playing with the code below easy.
I *could* I guess define the hover background color for each class to match the background that would be there for the class. Although I'm not quite sure how. And the real html I have has LOTS of color classes and many, many, many anchors. The editing would be a bear.
I'm really hoping that there's a good, all encompassing css way of excluding images in anchors from having a background text change. Ideally, one or two lines in the style that would solve the problem across the board, without having to edit the rest of the html. That is, in the example below:
- in the white area, you can see through the image to the image to the white background whether being hovered or not. And it IS part of the link
- in the black area, you can see through the image to the black background whether being hovered or not. And it IS part of the link.
I appreciate your patience as we iterate through this.
<html>
<head>
<title>Untitled</title>
<style>
body { background-color: black; color: orange }
img { background-color: transparent }
.whitearea {
background-color: white;
color: green;
display: block;
}
a:link, a:visited { color: white }
a:hover {background-color: blue; color: red }
.whitearea a:link, .whitearea a:visited { color: pink }
.whitearea a:hover { background-color: red; color: aqua }
</style>
</head>
<body>
<div class="whitearea">
<p>
A paragraph that contains a <a href="foo.html">link</a> and<br>
an image <a href="foo.html"><img alt="99welcome.jpg (2K)" src="foo.gif" height="30" width="30" border="0">and a link</a>
</p>
</div>
<p>
A paragraph that contains a <a href="foo.html">link</a> and<br>
an image <a href="foo.html"><img alt="99welcome.jpg (2K)" src="foo.gif" height="30" width="30" border="0">and a link</a>
</p>
</body>
</html>
For any class for which I have a background color defined for a:hover (including the default class), I needed to add the following
[.OptionalClassNameIfAny] a:hover img {
background-color: [whatever the prevailing background color is for that class]
For example, in my case, I added a:hover img { background-color: black } after my default a:hover specification. I also added .whitearea a:hover img { background-color: white } after specifying a:hover for my .whitearea class.
I had spent two days searching usenet groups and various forums without finding a solution. Thanks Dr. Doc for your help. And this solution required adding two simple things to the style sheet without tweaking the actual html, which is the simplicity I'd hoped for.
My "finished" html that does what I want is below.
<html>
<head>
<title>Untitled</title>
<style>
body { background-color: black; color: orange }
img { background-color: transparent }
.whitearea {
background-color: white;
color: green;
display: block;
}
a:link, a:visited { color: white }
a:hover {background-color: blue; color: red }
/* added the following to make the default hovers work; it MUST be after the a:hover declaration */
a:hover img { background-color: black }
.whitearea a:link, .whitearea a:visited { color: pink }
.whitearea a:hover { background-color: red; color: aqua }
/* added the following to make the white area hovers work; it MUST be after the a:hover declaration */
.whitearea a:hover img { background-color: white }
</style>
</head>
<body>
<div class="whitearea">
<p>
A paragraph that contains a <a href="foo.html">link</a> and<br>
an image <a href="foo.html"><img alt="99welcome.jpg (2K)" src="foo.gif" height="30" width="30" border="0">and a link</a>
</p>
</div>
<p>
A paragraph that contains a <a href="foo.html">link</a> and<br>
an image <a href="foo.html"><img alt="99welcome.jpg (2K)" src="foo.gif" height="30" width="30" border="0">and a link</a>
</p>
</body>
</html>
