www.webdeveloper.com
Results 1 to 8 of 8

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

  1. #1
    Join Date
    Sep 2003
    Posts
    301

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

    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?

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    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.

  3. #3
    Join Date
    Sep 2003
    Posts
    301
    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.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,145
    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?
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Sep 2003
    Posts
    301
    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

  6. #6
    Join Date
    Oct 2012
    Posts
    78
    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.

  7. #7
    Join Date
    Mar 2011
    Posts
    1,145
    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>
    Rick Trethewey
    Rainbo Design

  8. #8
    Join Date
    Sep 2003
    Posts
    301
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles