www.webdeveloper.com
Results 1 to 4 of 4

Thread: Pseudoclass :hover used in embedded style.

  1. #1
    Join Date
    May 2009
    Posts
    2

    Pseudoclass :hover used in embedded style.

    I want to prepare some kind of Mediawiki template which will highlight (change background color) links pointed by mouse cursor. Problem is that this particular wiki installation cannot be reconfigured (no access to css sheets) because our Intranet admins usually doesn't perform such unimportant tasks like wiki administration and doesn't allow others to do this instead.

    I know that it is possible to do such thing using javascript (onmouseover) but I prefer to use CSS :hover pseudoclass.

    My question is then:
    How I can use :hover to alter background color using "style=" attribute of span tag?

    I tried something like this:
    Code:
    <span style="a:hover {background: pink;}"><a href="http://www.google.com">Google</a></span>
    and many other things but without success. Could someone give me a hint how to do something like this?

    /Joss

  2. #2
    Join Date
    Nov 2002
    Location
    Baltimore, Maryland
    Posts
    12,279
    It can't be done with inline styles.
    “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
    —Tim Berners-Lee, W3C Director and inventor of the World Wide Web

  3. #3
    Join Date
    May 2009
    Posts
    2

    Angry

    Quote Originally Posted by Charles View Post
    It can't be done with inline styles.
    I've found that this HTML specification states otherwise:
    http://www.w3.org/TR/css-style-attr

    I've tried this, but still without success:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <body>
    <p style="background: yellow; color: blue">Blue on yellow paragraph.</p>
    
    <p style="{color: #090; line-height: 1.2}
              ::first-letter {color: #900}">Test paragraph with first-letter color effect.</p>
    
    <a href="http://www.w3.org/Style/CSS"
       style="{color: blue; background: white}
              :visited {color: green}
              :hover {background: yellow}
              :visited:hover {color: purple}
             ">
      Example of a hyperlink to the CSS home page with special one-off
      visited and hover effects.
    </a>
    </body>
    </html>
    What is wrong? Have to add some extra meta to head section?
    Any ideas?

    /Joss

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    There is a lot more in the W3C recommendations that are just not supported or partially supported.
    Inline pseudo class is not supported in any browser.

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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