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 5 of 5
  1. #1
    New Coder
    Join Date
    Jan 2003
    Location
    Jersey City NJ
    Posts
    35
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I want to make a simple link-mouse over css alone

    I'm looking to create my own link/text mouse over effect in a css file. I would integrade it in my scrollbar css but I don't know how. If you know how to do what I want, tell me,..thanks

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    ColoRockyz
    Posts
    1,649
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Well, I guess you want to change styles of mouseovers with css.

    <style type="text/css">
    .style1 {font:normal 12 verdana;color:white}
    .style2 {font:bold 12 verdana;color:white}
    </style>
    </head>
    <body>
    <input type="button" class="style1" onmouseover="this.className='style2';" onmouseout="this.className='style1';" value="Zoob">
    Zoobie or not Zoobie...That is the problem.
    <body onUnload="flush( ! )">

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There is a shortcut for links that you can use. Like this:
    Code:
    a.ntLnk:active { font-weight: bold; background-color: black; } 
    a.ntLnk:hover { font-weight: bold; background-color: black; }
    a.ntLnk:visited { font-weight: bold; background-color: black; }
    a.ntLnk:link { font-weight: bold; background-color: black; }
    :active = When it is clicked
    :hover = When the mouse is over it (what you want to do)
    :visited = When the target page of the link has been visited already
    :link = When it is a link (when the href attribute is present)
    Zoobie's method is more flexible because you can use it even with text fields and stuff, but this is a quick way that doesn't use javascript and can save you a lot of typing. Hope that this helps.
    ~evlich

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    :hover support

    The :hover pseudoclass isn't supported by all browsers; the javascript solution has much wider support. Using pure CSS has its merits, however...
    If you want to use speudoclasses, take great care with the order in which the styles are declared:

    First, optionally declare a style for the a element itself,
    second, declare the :link pseudoclass style,
    third, declare the :visited pseudoclass style,
    fourth, declare the :hover pseudoclass style,
    fifth and last, declare the :active pseudoclass style.

    Any other order may cause certain style declarations to not work!
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Same difference

    Come to think of it, the javascript properties used in Zoobies example are supported by about the same browsers that support the :hover pseudoclass, so it really doesn't make that much difference. In that case i'd go for :hover.
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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