CSS Mouseover Question

Discussion in 'HTML' started by Toronto Newf, Jan 9, 2005.

  1. Toronto Newf

    Toronto Newf Guest

    Hi

    How do you do a Mouse Over in CSS

    thanks,


    Robert
     
    Toronto Newf, Jan 9, 2005
    #1
    1. Advertising

  2. Toronto Newf wrote:

    > Hi
    >
    > How do you do a Mouse Over in CSS
    >
    > thanks,
    >
    >
    > Robert


    Here is an example:

    CSS:

    ..mouseOn{
    border-top: 3px solid #525252;
    border-bottom: 7px solid #525252;
    border-left: 5px solid #525252;
    border-right: 3px solid #525252;
    }

    Hyper-text:

    <X class ="Default"
    onmouseover =" this.className='mouseOn" />

    --
    Roy Schestowitz
    http://schestowitz.com
     
    Roy Schestowitz, Jan 9, 2005
    #2
    1. Advertising

  3. Toronto Newf

    rf Guest

    "Roy Schestowitz" <> wrote
    > Toronto Newf wrote:
    >
    > > Hi
    > >
    > > How do you do a Mouse Over in CSS


    > <X class ="Default"
    > onmouseover =" this.className='mouseOn" />


    I think the OP means without javascript.

    a:link {...}
    a:visited {extra properties for visited links}
    a:hover {extra properties for hovered links}
    a:active {extra properties for the active link}

    --
    Cheers
    Richard.
     
    rf, Jan 9, 2005
    #3
  4. rf wrote:

    > I think the OP means without javascript.
    >
    > a:link {...}
    > a:visited {extra properties for visited links}
    > a:hover {extra properties for hovered links}
    > a:active {extra properties for the active link}


    That's correct, but there was no mentioning of link elements in the
    question.

    By the way, there was a missing apostrophe in that code I typed down. Didn't
    think it was worth superseding the article for...

    --
    Roy Schestowitz
    http://schestowitz.com
     
    Roy Schestowitz, Jan 9, 2005
    #4
  5. Toronto Newf

    Neal Guest

    Toronto Newf <> wrote:

    > Hi
    >
    > How do you do a Mouse Over in CSS


    unless you plan to accomodate IE, do this:

    selector:hover {
    property: value;
    }

    If you plan to accomodate IE, lotsa luck. You can use conditionals or
    hacks to send special things to IE.
     
    Neal, Jan 9, 2005
    #5
  6. Roy Schestowitz wrote:
    > rf wrote:
    >
    >
    >>I think the OP means without javascript.
    >>
    >>a:link {...}
    >>a:visited {extra properties for visited links}
    >>a:hover {extra properties for hovered links}
    >>a:active {extra properties for the active link}

    >
    >
    > That's correct, but there was no mentioning of link elements in the
    > question.


    So then use a different selector:

    p:hover {
    color: red
    }
     
    Leif K-Brooks, Jan 9, 2005
    #6
  7. Toronto Newf

    SpaceGirl Guest

    Leif K-Brooks wrote:
    > Roy Schestowitz wrote:
    >
    >> rf wrote:
    >>
    >>
    >>> I think the OP means without javascript.
    >>>
    >>> a:link {...}
    >>> a:visited {extra properties for visited links}
    >>> a:hover {extra properties for hovered links}
    >>> a:active {extra properties for the active link}

    >>
    >>
    >>
    >> That's correct, but there was no mentioning of link elements in the
    >> question.

    >
    >
    > So then use a different selector:
    >
    > p:hover {
    > color: red
    > }


    IE only support :hover on links. You cannot use it on any other elements.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Jan 9, 2005
    #7
  8. SpaceGirl wrote:

    > Leif K-Brooks wrote:
    >> Roy Schestowitz wrote:
    >>
    >>> rf wrote:
    >>>
    >>>
    >>>> I think the OP means without javascript.
    >>>>
    >>>> a:link {...}
    >>>> a:visited {extra properties for visited links}
    >>>> a:hover {extra properties for hovered links}
    >>>> a:active {extra properties for the active link}
    >>>
    >>>
    >>>
    >>> That's correct, but there was no mentioning of link elements in the
    >>> question.

    >>
    >>
    >> So then use a different selector:
    >>
    >> p:hover {
    >> color: red
    >> }

    >
    > IE only support :hover on links. You cannot use it on any other elements.


    Indeed. I was surprised when you suggested that statement which appears a
    little too sophisticated for IE to support.

    --
    Roy Schestowitz
    http://schestowitz.com
     
    Roy Schestowitz, Jan 9, 2005
    #8
  9. SpaceGirl wrote:
    > Leif K-Brooks wrote:
    >
    >> p:hover {
    >> color: red
    >> }

    >
    > IE only support :hover on links. You cannot use it on any other elements.


    And Lynx doesn't support CSS in the slightest, but no one complains
    about Web pages not being quite as pretty when viewed with it. As long
    as the page remains usable and non-ugly, why worry if it's not quite as
    pretty as it should be in grossly inferior Web browsers?
     
    Leif K-Brooks, Jan 9, 2005
    #9
  10. Toronto Newf

    SpaceGirl Guest

    Leif K-Brooks wrote:
    > SpaceGirl wrote:
    >
    >> Leif K-Brooks wrote:
    >>
    >>> p:hover {
    >>> color: red
    >>> }

    >>
    >>
    >> IE only support :hover on links. You cannot use it on any other elements.

    >
    >
    > And Lynx doesn't support CSS in the slightest, but no one complains
    > about Web pages not being quite as pretty when viewed with it. As long
    > as the page remains usable and non-ugly, why worry if it's not quite as
    > pretty as it should be in grossly inferior Web browsers?


    Well teh functionality is lost completely. Careful design could get it
    to fail safe in IE... but really... it doesn't.

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
     
    SpaceGirl, Jan 9, 2005
    #10
  11. Toronto Newf

    rf Guest

    "Roy Schestowitz" <> wrote
    > SpaceGirl wrote:


    > > IE only support :hover on links. You cannot use it on any other

    elements.
    >
    > Indeed. I was surprised when you suggested that statement which appears a
    > little too sophisticated for IE to support.


    It was I that suggested hover, not the SpaceGirl.

    I suggested that approach because of the nature of the question.

    Such a question would seem to imply that the OP has noticed that certain
    WISIGYDG "editors" use loads of javascript to achieve a hover effect on
    generated anchor elements (called a "mouseover" only because that is the
    event handler that is used)

    Further, the OP has probably just discovered CSS and is wondering if it can
    be used to achieve the same effect, without all the nasty javascript.

    I seriously doubt that the OP wants to change the colours of hovered
    paragraphs but rather wants to do something with the colour of a link, just
    like most modern sites do.

    As to IE support of the lack thereof, if the OP was aware that modern
    browsers support the :hover pseudo class on elements other than anchor
    elements, and that IE does not, then the OP would already know the answer to
    the question.

    Anyway, :hover *is* usually used only with links. To use it with other
    elements (by changing the colour of a paragraph, say) one may just confuse
    to the viewer, making said viewer think that the text *is* a link and should
    be clicked on.

    --
    Cheers
    Richard.
     
    rf, Jan 9, 2005
    #11
  12. On Sun, 09 Jan 2005 23:46:28 GMT, rf <rf@.invalid> wrote:

    [Image swaps]

    > all the nasty javascript.


    It's a little unfair to poor old Javascript to generalise like that. Yes,
    there certainly are many poor implementations that are hard to maintain,
    but it doesn't have to be that way.

    [snip]

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Jan 10, 2005
    #12
  13. Toronto Newf

    rf Guest

    "Michael Winter" <> wrote
    > On Sun, 09 Jan 2005 23:46:28 GMT, rf <rf@.invalid> wrote:
    >
    > [Image swaps]
    >
    > > all the nasty javascript.

    >
    > It's a little unfair to poor old Javascript to generalise like that. Yes,
    > there certainly are many poor implementations that are hard to maintain,
    > but it doesn't have to be that way.


    <grin/>

    I was not really talking about a particular implementation of javascript,
    but rather the nasty stuff that the so called editors spit out to achieve a
    :hover effect, dreamweaver being the chief offender :)

    So much javascript when a couple of CSS rules will do the same thing, and
    encourage better coding and design practices as well, like swapping
    background images rather than swapping pretty foreground images containing
    pictures of text.

    --
    Cheers
    Richard.
     
    rf, Jan 10, 2005
    #13
    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. Steve Chatham

    ASP dotnet question - mouseover

    Steve Chatham, Nov 17, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    440
    Chris Jackson
    Nov 17, 2003
  2. Jochen Fuhrmann

    mouseover (css)

    Jochen Fuhrmann, Oct 27, 2004, in forum: HTML
    Replies:
    3
    Views:
    500
    Jochen Fuhrmann
    Oct 27, 2004
  3. William Hughes

    Mouseover/Java Question

    William Hughes, May 29, 2005, in forum: HTML
    Replies:
    4
    Views:
    829
    William Hughes
    May 30, 2005
  4. =?Utf-8?B?SGFyZHkgV2FuZw==?=

    Image mouseover/mouseout attributes and Theme/Skin question

    =?Utf-8?B?SGFyZHkgV2FuZw==?=, Feb 13, 2007, in forum: ASP .Net
    Replies:
    0
    Views:
    438
    =?Utf-8?B?SGFyZHkgV2FuZw==?=
    Feb 13, 2007
  5. richard
    Replies:
    12
    Views:
    787
    dorayme
    Mar 9, 2010
Loading...

Share This Page