Mouse-On CSS

Discussion in 'CSS' started by Pietercornelis, Dec 22, 2006.

0
  1. #1
    Hey all,

    I've read here and there that it's possible to make a mouse-on or mouse-over event using CSS. However, I haven't been able to find a concise tutorial on this, most tutorials are on JavaScript. Could anyone point me to a good tutorial, or teach me right here?
    Thanks in advance!
     
    Pietercornelis, Dec 22, 2006 IP
  2. Cypherus

    Cypherus Peon

    Messages:
    1,551
    Likes Received:
    102
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Cypherus, Dec 22, 2006 IP
  3. Pietercornelis

    Pietercornelis Guest

    Messages:
    631
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes, I have read the first link, and many more of those tutorials. And I'm looking to learn the kind of CSS used in your second link. But I can't find something that learns me that advanced CSS. Anyone know?
     
    Pietercornelis, Dec 22, 2006 IP
  4. weknowtheworld

    weknowtheworld Guest

    Messages:
    306
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    weknowtheworld, Dec 22, 2006 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Well, if you want the mouseover to be applied to a link, you can do it like this:
    
<a href="#">Some Link</a>
    HTML:
    
a:link {
    background: #FFF; /* white */
    color: #00F; /* blue */
    text-decoration: underline; /* puts an underline below the link text */
}

a:visited {
    background: #FFF;
    color: #F0F; /* purple */
    text-decoration: underline;
}

a:hover {
   background: #0F0; /* green */
   color: #FF0; /* yellow */
   text-decoration: none; /* removes the underline */
}
    Code (markup):
    If you want to replace the text with an image, then add an empty SPAN to the link (just before the text), and give the anchor an ID. Note that if you want to support Mac-IE, you will have to use another inline element, like EM instead (since it chokes on SPAN).
    
<a href="#" id="imageReplace1"><span></span>Some Link</a>
    HTML:
    Then follow the tutorial on SitePoint showing how to create accessible header images; just swap out the heading element (If I remember correctly, they use H1) with the name of the ID for your link. Now rather than applying the same background image for your :link and :visited states, why not just declare all the "default" link states using the a selector?
    
/* this is just an example */
#imageReplace1 {
    background: url('/path/to/image/file.png');
    display: block;
    height: 150px; /* just an arbitrary value */
    width: 200px; /* just an arbitrary value */
}
    Code (markup):
    Then, for the hover state, just swap the first image for another one of the same size (since everything else has already been declared, all you have to do is tell the browser to use the new image for the hover state instead):
    
#imageReplace1:hover {
    background: url('/path/to/image/file2.png');
}
    Code (markup):
    Now bear in mind it's almost 3am here (0300 for those outside the US), so I'm purposely keeping this short. If you want, I can show you (in excruciating detail) how to do this when I wake up.

    And yes, you can do the same thing with any other element, just beware that IE 5, 5.5 and 6 will need a little "help" via a .htc file and a conditional comment (since behaviors, expressions and filters will cause a stylesheet to fail validation) in order for them to work properly (properly as in "at all").
     
    Dan Schulz, Dec 24, 2006 IP