So it is not posible to do multiple hover styles on 1 definition?

**etard** · 02-12-2013 09:40 AM

So apparently, this is not possible? What's the reason?

.xxx:hover, .yyy:hover, .zzz:hover {
filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;
}

The css works fine, that is not my issue so no comment needed there, but as soon as you stack several hover classes for 1 definition, it breaks down. Whereas you can stack other styles on a single definition no problem.

What am I missing in this case?

**theyoker** · 02-12-2013 06:41 PM

Can you explain what you mean by definition.

Should get all the hovers to do the CSS you want in one. I don't see the difference in grouping them and doing single css for each one.

Code:

#XXX:hover, #YYY:hover, #ZZZ:hover {
filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;}

That hows I would do it.

**etard** · 02-12-2013 07:03 PM

I was calling this the definition

Code:

{
filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;
}

and these are the classes

Code:

#XXX:hover, #YYY:hover, #ZZZ:hover

The "definition" works totally fine. So no issues there.

Where there is an issue is with tying multiple classes to the definition. Something that is very common. If I just tie 1 class to the definition, it works perfect. But the moment you do #XXX:hover, #YYY:hover, #ZZZ:hover and tie multiple classes to that definition, it fails. It is very common to do several classes .xxx, .yyy, .zzz, .aaa tied to 1 definition. But when using the hover class, it seems to break that ability.

So if I "group" them it busts the function. If I do each one separate - unnecessarily redundant - it works.

**rtrethewey** · 02-13-2013 10:16 AM

Can you post an example of both the HTML and CSS code where this fails for you and say which browser(s) it fails in?

**etard** · 02-13-2013 10:28 AM

Really, the example I gave is crystal clear. As I have said several times, the css definition works fine. Perfect. No issues. Cross browser tested. It is not a browser issue either. At all. Not related.

I am not sure how much clearer I can make this.

The issue is multiple classes tied to the definition.

I will try to explain this 1 more time with example and hope it is clear.

We all know what this means, right? It means that paragraph, header size 1, header size 2 and tables use the font family 'Helvetica', 'Myriad Pro', 'Myriad Pro Bold', Arial, Helvetica, Sans-serif.

Code:

p, H1, H2, table, {font-family:'Helvetica', 'Myriad Pro', 'Myriad Pro Bold', Arial, Helvetica, Sans-serif;}

So, we should know what this means, right? it means for the class xxx and yyy and zzz when you hover over them the css execute an opacity change

Code:

#XXX:hover, #YYY:hover, #ZZZ:hover {
filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;
}

BUT IT DOES NOT WORK.

This works

Code:

#XXX:hover {
filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;
}

this does NOT

Code:

#XXX:hover, #YYY:hover, #ZZZ:hover {
filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;
}

and notice the ONLY change is the addition of extra classes #YYY:hover, #ZZZ:hover assigned to the css definition

**theyoker** · 02-13-2013 06:44 PM

The following code when ever one of these is being hovered over the background will turn a green colour. Thats all of them will turn green at once.

Code:

#XXX:hover, #YYY:hover, #ZZZ:hover {background: #99FF33;}

Do you want it when one is hovered over for them all to be zoomed in? From what I can see it seems you only want one to zoom in at a time whilst the overs aren't zoomed. This is why showing some HTML can really help since it shows what your aiming for. If you want single zoom stick to the code that worked.

**rtrethewey** · 02-13-2013 06:52 PM

I suspect the problem lies elsewhere in your code because the following works for me:

Code:

<!DOCTYPE html>
<html>
<title>Multiple Pseudo-Class Selectors</title>
<style>
#d1, #d2, #d3 { background-color:#ffffd7; height:40px; border:solid 1px black; }
#d1:hover, #d2:hover, #d3:hover { background-color:#ff0; }
</style>
</head>
<body>
<h1>Pseudo Class Selectors</h1>
<div id="d1">D1</div>
<div id="d2">D2</div>
<div id="d3">D3</div>
</body>
</html>

**etard** · 02-13-2013 07:05 PM

Well, if each definition works individually for me

Code:

#XXX:hover {filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;}
#YYY:hover {filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;}
#ZZZ:hover {filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;}

I expect the combo to work for me

Code:

#XXX:hover, #YYY:hover, #ZZZ:hover {filter:alpha(opacity=50);
zoom: 1;
opacity:0.5;}

It does not. Hence this topic.

BUT, as expected and assumed, rtrethewey's code works. So, he must be right as there must be something else I am missing in my code. Hmmmm....

Thread: So it is not posible to do multiple hover styles on 1 definition?

Thread Tools

Display

So it is not posible to do multiple hover styles on 1 definition?

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions