mouse-overs in CSS

Discussion in 'HTML' started by Mice Over, Apr 28, 2006.

  1. Mice Over

    Mice Over Guest

    Hello,

    new to html and learning some CSS...

    notice in some in-line style statments, you can use onmouseover, onmouseout
    statements to control hover features of links or table cells.

    instead of implanting the lengthly style description in every TD, I'm
    wondering, can onmouseover (etc) statements be built into style defn's in a
    seperate CSS file or in a style statement in the <head>.

    seems to me that the "onmousewhatever" stuff is javascript, right? and JS
    can / cant be used in CSS statements?

    thanks for any wisdom

    Daniel
    Mice Over, Apr 28, 2006
    #1
    1. Advertising

  2. On Fri, 28 Apr 2006 09:52:49 +0200, Mice Over <> wrote:

    > notice in some in-line style statments, you can use onmouseover,
    > onmouseout
    > statements to control hover features of links or table cells.
    >
    > instead of implanting the lengthly style description in every TD, I'm
    > wondering, can onmouseover (etc) statements be built into style defn's
    > in a
    > seperate CSS file or in a style statement in the <head>.


    <URL:http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>

    Example, markup:
    <ul id="menu">
    <li><a href="home.html">home</a></li>
    <li><a href="sitemap.html">sitemap</a></li>
    <li><a href="test.html">test</a></li>
    <li><a href="test2.html">test 2</a></li>
    <li><a href="contact.html">contact.html</a></li>
    </ul>

    Example, styles (in the head of the page):
    <style type="text/css">
    #menu {
    float:left;
    margin:0 2em 1em 0;
    width:8em; }

    #menu ul {
    list-style:none;
    margin:0;
    padding:0; }

    #menu a {
    display:block;
    width:100%;
    text-decoration:none;
    background-color:yellow;
    color:black; }

    #menu a:hover, #menu a:visited {
    background-color:black;
    color:yellow; }

    #menu a:active {
    background-color:rgb(130,130,130); }
    </style>

    There are many good recourses on line. Try Google
    <URL:http://www.google.com/search?q=CSS+navigation+menu>


    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Barbara de Zoete, Apr 28, 2006
    #2
    1. Advertising

  3. Barbara de Zoete, Apr 28, 2006
    #3
  4. Mice Over

    Mice Over Guest

    Thanks Barbara,

    Interesting possibilities arise, using <UL>'s as navigation bars! something
    I hadn't considererd.
    But my main question was this: the statements that use phrases like
    "onmouseover" and "onmouseout" can be used in as style attributes, say in
    <td> tags, making the entire cell "clickable", but can these very phrases be
    used in seperate style sheets or in style def's in the <head> of the doc as
    you outlined below. Not just the a:hover psuedoclass, but actual words like
    "onmouseover, do this, do that, etc".

    make sense?

    thanks!


    "Barbara de Zoete" <> wrote in message
    news:eek:p.s8pkv7arl8uz2z@zoete_b...
    > On Fri, 28 Apr 2006 09:52:49 +0200, Mice Over <> wrote:
    >
    >> notice in some in-line style statments, you can use onmouseover,
    >> onmouseout
    >> statements to control hover features of links or table cells.
    >>
    >> instead of implanting the lengthly style description in every TD, I'm
    >> wondering, can onmouseover (etc) statements be built into style defn's
    >> in a
    >> seperate CSS file or in a style statement in the <head>.

    >
    > <URL:http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes>
    >
    > Example, markup:
    > <ul id="menu">
    > <li><a href="home.html">home</a></li>
    > <li><a href="sitemap.html">sitemap</a></li>
    > <li><a href="test.html">test</a></li>
    > <li><a href="test2.html">test 2</a></li>
    > <li><a href="contact.html">contact.html</a></li>
    > </ul>
    >
    > Example, styles (in the head of the page):
    > <style type="text/css">
    > #menu {
    > float:left;
    > margin:0 2em 1em 0;
    > width:8em; }
    >
    > #menu ul {
    > list-style:none;
    > margin:0;
    > padding:0; }
    >
    > #menu a {
    > display:block;
    > width:100%;
    > text-decoration:none;
    > background-color:yellow;
    > color:black; }
    >
    > #menu a:hover, #menu a:visited {
    > background-color:black;
    > color:yellow; }
    >
    > #menu a:active {
    > background-color:rgb(130,130,130); }
    > </style>
    >
    > There are many good recourses on line. Try Google
    > <URL:http://www.google.com/search?q=CSS+navigation+menu>
    >
    >
    > --
    > ______PretLetters:
    > | weblog | http://www.pretletters.net/weblog/weblog.html |
    > | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    > |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Mice Over, Apr 29, 2006
    #4
  5. Mice Over

    Toby Inkster Guest

    Mice Over wrote:

    > But my main question was this: the statements that use phrases like
    > "onmouseover" and "onmouseout" can be used in as style attributes


    onmouseover / onmouseout are HTML attributes that fire event handling
    code, usually written in Javascript -- they have nothing to do with CSS as
    such.

    What I think you're trying to ask is: "is there a way of assigning
    code to happen in response to events without littering my code with lots
    of onmouseover attributes?"

    The answer is yes, but it doesn't involve CSS. Here's a quick example:

    <script type="text/javascript">
    // Utility function -- this is often useful!
    function addLoadEvent (func)
    {
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
    window.onload = func;
    }
    else
    {
    window.onload = function()
    {
    oldonload();
    func();
    }
    }
    }

    function myfunc1 ()
    {
    window.alert("Hello");
    }

    function init_behaviours ()
    {
    var els = document.getElementsByTagName("TD");
    for (var i=0; els; i++)
    els.onmouseover = myfunc1;
    }

    addLoadEvent(init_behaviours);
    </script>

    This will attach the behaviour "myfunc1" to all table cells onmouseover
    events.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./b52s_-_love_shack.ogg
    Toby Inkster, Apr 29, 2006
    #5
  6. Barbara de Zoete wrote:
    > On Fri, 28 Apr 2006 10:08:21 +0200, Barbara de Zoete
    > <> wrote:
    >
    >> #menu a:hover, #menu a:visited {
    >> background-color:black;
    >> color:yellow; }

    >
    >
    > Wanted to say:
    >
    > #menu a:hover, #menu a:focus {
    > ... }

    Could you explain what you mean by a:focus :-?
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
    Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    24help.info and issociate.de to duplicate this post.
    Edwin van der Vaart, Apr 29, 2006
    #6
  7. Mice Over

    Neredbojias Guest

    To further the education of mankind, Edwin van der Vaart
    <> vouchsafed:

    >> Wanted to say:
    >>
    >> #menu a:hover, #menu a:focus {
    >> ... }


    > Could you explain what you mean by a:focus :-?


    Whenever a link element has the focus. This is sometimes indicated by a
    dashed "focus ring" surrounding the link, and css can be used to provide
    different styles to said element.

    --
    Neredbojias
    Infinity has its limits.
    Neredbojias, Apr 29, 2006
    #7
  8. On Sat, 29 Apr 2006 21:48:32 +0200, Edwin van der Vaart
    <> wrote:

    > Barbara de Zoete wrote:
    >
    >> Wanted to say:
    >> #menu a:hover, #menu a:focus {
    >> ... }

    >
    > Could you explain what you mean by a:focus :-?


    If you don't use a mouse, you can 'tab' your way through a page. With
    every time you hit the tab key, you move to a next hyper link in a page
    (if the page is build properly). While 'tabbing' from link to link you
    give the hyper links focus one after another, like you could do by
    hovering over them (sort off). Which is why I give the pseudo classes
    :hover and :focus the same features.

    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
    Barbara de Zoete, Apr 29, 2006
    #8
  9. Barbara de Zoete wrote:
    > On Sat, 29 Apr 2006 21:48:32 +0200, Edwin van der Vaart
    > <> wrote:
    >> Barbara de Zoete wrote:
    >>> Wanted to say:
    >>> #menu a:hover, #menu a:focus {
    >>> ... }

    >>
    >>
    >> Could you explain what you mean by a:focus :-?

    >
    > If you don't use a mouse, you can 'tab' your way through a page. With
    > every time you hit the tab key, you move to a next hyper link in a page
    > (if the page is build properly). While 'tabbing' from link to link you
    > give the hyper links focus one after another, like you could do by
    > hovering over them (sort off). Which is why I give the pseudo classes
    > :hover and :focus the same features.

    I see. Thanx for the info.
    I'll try it on one of mine site.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
    Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    24help.info and issociate.de to duplicate this post.
    Edwin van der Vaart, Apr 29, 2006
    #9
  10. Mice Over

    Els Guest

    Barbara de Zoete wrote:

    > While 'tabbing' from link to link you
    > give the hyper links focus one after another, like you could do by
    > hovering over them (sort off). Which is why I give the pseudo classes
    > :hover and :focus the same features.


    And if you'd like the same for IE, you'd have to add :active as well.

    --
    Els http://locusmeus.com/
    Els, Apr 29, 2006
    #10
  11. Els wrote:
    > Barbara de Zoete wrote:
    >
    >>While 'tabbing' from link to link you
    >>give the hyper links focus one after another, like you could do by
    >>hovering over them (sort off). Which is why I give the pseudo classes
    >>:hover and :focus the same features.

    >
    > And if you'd like the same for IE, you'd have to add :active as well.

    Thanx.
    Why isn't an option that both browsers does understand e.g. :tab instead
    of (for IE) :active and (others) :focus.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
    Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    24help.info and issociate.de to duplicate this post.
    Edwin van der Vaart, Apr 30, 2006
    #11
  12. Mice Over

    Toby Inkster Guest

    Edwin van der Vaart wrote:

    > Why isn't an option that both browsers does understand e.g. :tab instead
    > of (for IE) :active and (others) :focus.


    Having separate selectors for IE and other browsers is not by
    design -- it's simply a bug in IE. Ideally, ":focus" would work
    in all CSS-supporting browsers.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Apr 30, 2006
    #12
  13. Mice Over

    Els Guest

    Edwin van der Vaart wrote:

    > Why isn't an option that both browsers does understand e.g. :tab instead
    > of (for IE) :active and (others) :focus.


    Your :tab is in fact :focus. It's just IE that got it wrong, and I
    don't see a reason why they'd get it right if you just named it :tab
    instead of :focus ;-)

    --
    Els http://locusmeus.com/
    Els, Apr 30, 2006
    #13
  14. Els wrote:
    > Edwin van der Vaart wrote:
    >
    >>Why isn't an option that both browsers does understand e.g. :tab instead
    >>of (for IE) :active and (others) :focus.

    >
    > Your :tab is in fact :focus. It's just IE that got it wrong, and I
    > don't see a reason why they'd get it right if you just named it :tab
    > instead of :focus ;-)

    In that case. IE drop...
    I'll keep in mind to use :focus.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Edwin's persoonlijke web site
    Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    24help.info and issociate.de to duplicate this post.
    Edwin van der Vaart, May 1, 2006
    #14
  15. Toby Inkster wrote:
    > Edwin van der Vaart wrote:
    >
    >>Why isn't an option that both browsers does understand e.g. :tab instead
    >>of (for IE) :active and (others) :focus.

    >
    > Having separate selectors for IE and other browsers is not by
    > design -- it's simply a bug in IE. Ideally, ":focus" would work
    > in all CSS-supporting browsers.

    Okay, an IE buggie.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Edwin's persoonlijke web site
    Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
    24help.info and issociate.de to duplicate this post.
    Edwin van der Vaart, May 1, 2006
    #15
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Davisro
    Replies:
    2
    Views:
    1,285
    Jim Corey
    Apr 23, 2004
  2. Max
    Replies:
    7
    Views:
    9,076
  3. Claus Atzenbeck
    Replies:
    1
    Views:
    1,060
    Claus Atzenbeck
    Nov 26, 2004
  4. Otuatail

    Mouse overs

    Otuatail, Jul 8, 2004, in forum: HTML
    Replies:
    6
    Views:
    584
    Nik Coughin
    Jul 9, 2004
  5. Matthew
    Replies:
    0
    Views:
    101
    Matthew
    Dec 27, 2003
Loading...

Share This Page