PDA

View Full Version : CSS:hover

lord_raven
08-18-2003, 07:40 PM
Is it possible to use one tag to alter another via CSS:hover?

For example:<span class="usethis">Mouse over this...</span>

<span class="tochangethis">To change the color (etc) of this...</span>
Vladdy
08-18-2003, 07:52 PM
Only in CSS2 compliant browsers (IE is not ) and when there is child-parent relationship or the elements are adjuscent siblings...
jkd
08-18-2003, 08:37 PM
Actually, dynamic pseudo-classes used in conjunction with adjacency combinators do not work in Mozilla or Opera. I'm not sure of the Opera bug number, but I've seen it in Bugzilla for Moz.

.usethis + .tochangethis {
color: black;
}
.usethis:hover + .tochangethis {
color: red;
}

Is the correct CSS2 code for that, however I don't believe it would work anywhere. I'm interested in knowing if Safari can do it?
Vladdy
08-18-2003, 08:55 PM
Thanks for clarification jkd. I never actually tested it with siblings, but could not think of a reason why it would not be a theoretically valid selector :p
lord_raven
08-18-2003, 09:05 PM
Originally posted by jkd
Actually, dynamic pseudo-classes used in conjunction with adjacency combinators do not work in Mozilla or Opera. I'm not sure of the Opera bug number, but I've seen it in Bugzilla for Moz.

.usethis + .tochangethis {
color: black;
}
.usethis:hover + .tochangethis {
color: red;
}

Is the correct CSS2 code for that, however I don't believe it would work anywhere. I'm interested in knowing if Safari can do it? It didn't work in Opera or Mozilla...
MotherNatrsSon
08-18-2003, 09:15 PM
LOL.. Never doubt the super moderator. :D

MNS
lord_raven
08-18-2003, 09:22 PM
Super moderator or not, it still didn't work (at least not the way I wanted it to)...
MotherNatrsSon
08-18-2003, 09:36 PM
I guess you missed this part:

Is the correct CSS2 code for that, however I don't believe it would work anywhere. I'm interested in knowing if Safari can do it?

MNS
Frank
08-18-2003, 10:03 PM
I think this is what you are looking for?

If you have any questions ask away thats what this forum is here for.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.firsttext{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 13px; color: #666666}
.secondtext{font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; line-height: 13px; font-weight: bold; color: #336633}
</style>
<script language="JavaScript" type="text/javascript">
function ChangeTextTo(){
document.getElementById('change').className = 'secondtext';
}

function ChangeTextBack(){
document.getElementById('change').className = 'firsttext';
}
</script>
</head>


<body bgcolor="#CCCCCC">
<span id="same" class="firsttext" onMouseOver="ChangeTextTo()" onMouseOut="ChangeTextBack()">Mouse Over Text</span><br>
<br>

<span id="change" class="firsttext">Text to Change</span>
</body>
</html>
Vladdy
08-18-2003, 10:17 PM
<observation>He asked for CSS solution</observation>
pardicity3
08-18-2003, 10:18 PM
What about twisting this (http://www.meyerweb.com/eric/css/edge/popups/demo.html) to do what you want it to. Something like:

.usethis:hover span { color: red; }

<span class="usethis">hello there <span>this will change</span></span>
Nightfire
08-19-2003, 12:53 AM
I don't think that'll change in IE? As far as i know, which isn't much, the :hover only works with links in IE
lord_raven
08-19-2003, 05:34 AM
I had a fealing I would only be able to do it with JavaScript...

Oh, well... I don't really need it anyway...
brothercake
08-19-2003, 09:56 AM
Originally posted by jkd
I'm interested in knowing if Safari can do it?
No, it can't.
pardicity3
08-19-2003, 05:04 PM
Originally posted by Nightfire
I don't think that'll change in IE? As far as i know, which isn't much, the :hover only works with links in IE And you're right. I wasn't thinking very properly when I gave that response. You could of course use an <a> tag and style it to not seem like one, but that doesn't seem very proper.
lord_raven
08-19-2003, 08:55 PM
IE won't style the A:hover unless the <a> has a functional HREF attribute... I've tried... Netscape'll do it, I found that out the hard way... the entire guestbook form was changing colors just from the <a name="sign">$gb_form</a> tag... *lol*

so I just added: A[name]:hover { color: #body_text-color; } to the stylesheet...

Off topic (kinda): I also found out that I can save space by doing this for changing the lables of the links in Opera...

<style>

/* Method 1 */
A:hover.footer { content: attr(content); }

or

/* Method 2 */
A[content]:hover { content: attr(content); }

</style>

<!-- Method 1 //-->
<a href="whatever" class="footer" content="hover content">whatever</a>

or

<!-- Method 2 //-->
<a href="whatever" content="hover content">whatever</a>