Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    how can i define a:hover using inline CSS?

    here my code now
    Code:
    <a href="prodInfo/Sirco/PVS.htm" style="text-decoration: none; color: black; font-size: 16">
    i want to do this:
    Code:
    <a href="prodInfo/Sirco/PVS.htm" style="text-decoration: none; color: black; font-size: 16; a:hover {text-decoration: underline}">
    whats the correct syntax for this?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not much support for inline declaration of pseudoclasses like hover. I tried a few different combinations and couldn't get anything to show up, even a change in background color. I'm on a PC and used IE6 and NN7 to no avail. I found a link to this (http://www.w3.org/TR/2002/WD-css-style-attr-20020515), but it's a working draft and doesn't seem to be very useful in application. It's just the syntax for making such declarations, but they don't work.

    You can use a javascript onmouseover to show styles, but I don't know enough about that to tell you how. A quick search should turn up some results. Here's one I found: http://www.experts-exchange.com/Web/..._21043237.html
    (scroll to the bottom of that page)

    Why not just make some CSS statements in the <head> of the document or use a seperate style sheet? Are you stuck to inline styles because of other restrictions?
    -ts

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    Colorado
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Check out this post I read on another forum...

    http://www.webmasterworld.com/forum83/4061.htm
    -Sk8er9547

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Cheers.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #5
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's a forum that I looked at, too. Does that solve anything about this, though?
    -ts

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    actually guys i dont get it.. i used the suggestions and i think i'm doing something wrong, something really stupid.

    here's my code:
    Code:
     style="{text-decoration: none; color: black; font-size: 16} :hover {text-decoration: underline}"
    what i want is an inline code that only shows the link underline when the mouse is over it. i can use onmouseover, but if there's a simple CSS solution i'll take that.

    is Hover even what i should be using?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Regular Coder
    Join Date
    May 2004
    Location
    San Jose, CA
    Posts
    388
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah; :hover is what you are talking about, but I can't get it to work inline either. I think that it's not supported, just *defined* in a working draft at the W3C.

    What about using:
    <body>
    <style type="text/css">
    a
    {text-decoration:none;}
    a:hover
    {text-decoration:underline;}
    </style>
    ??? You MUST have this inline? I can't get it to work that way and I'm not reading much else about it being supported as an inline element. Sorry I can't help.
    -ts

  • #8
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    willy, glenn, etc et al.

    where art thou!?

    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm no Willy or Glenn, but here, knock yourself out.
    Code:
    <a href="#" style="text-decoration: none;" onmouseover="this.style.textDecoration = 'underline'" onmouseout="this.style.textDecoration = 'none'">asdasdasdads</a>

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    wicked, muchos cracias non-willy/glenn entity
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #11
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The answer Antoniohawk gave was the best solution, if you really desperately NEED to use inline styles. You cannot define what happens when a user hovers over an object, such as a link or certain text, using inline styles. You can however use the onMouseOver and onMouseOut events to call JavaScript and change the styles. The only problem I've had is how to determine which color to use onMouseOut. Should I use the visited color or the unvisited color? If the user has visited the link, why use the unvisited color? Likewise, if the user has not visited the link, why use the visited color? Just some food for thought.


    *edit*

    I do, however, second the recommendation to use an actual stylesheet despite Antonio's wonderful suggestion. Just apply a class to a specific hover element and add the class attribute to the element you want the effect to happen on.

    Example:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
    <html>
    <head>
    <title>Magenta</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    
    a
    {
    text-decoration: none;
    }
    
    a:hover
    {
    color: #f0f;
    }
    
    a.nav:hover
    {
    text-decoration: underline;
    }
    
    </style>
    </head>
    <body>
    <div>
      <a href="#" class="nav">Should be a light purple/magenta WITH underline</a>
      <br>
      <a href="#">Should be a light purple/magenta WITHOUT underline</a>
    </div>
    </body>
    </html>
    Just copy the above code into a completely blank HTML document. The links obviously link to nothing. This is just to show an example.

    Tested in Mozilla 1.7 and IE6
    Last edited by gohankid77; 07-21-2004 at 01:53 AM.


  •  

    Posting Permissions

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