Thread: css mouse over

    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    Canada
    Posts
    20
    Rep Power
    0

    Question


    Trying to make a text effect (mouseover, hover) with CSS - works just fine in IE but not with Netscape...any suggestions or hints.

    Thanks

    Smitty
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2001
    Location
    Canada / NZ / UK
    Posts
    73
    Rep Power
    14
    you shouldnt be having problems with it unless you have a very old version of netscape...

    i use something like:


    A {
    color: #ffffff;
    text-decoration: none;
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    }
    A:HOVER {
    color: Teal;
    text-decoration: underline;
    font-family: Arial, Tahoma, Helvetica, sans-serif;
    font-size: 11px;
    }
    Highest Leader of UM
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Posts
    4
    Rep Power
    0

    Angry Good Ol Netscape


    Smitty ~

    Unfortunately Netscape 4.x versions do not support the hover events like IE does until Netscape 6. If you wanna a rollover effect you may wanna try preloading some images and having an image swap function.

    If you wanna continue playing with IE ... try these styles. You can take control over all link states. Just put the class inside the anchor tag.

    .on {text-decoration:none; color:#ff0000;}
    .on:active {text-decoration:none; color:#ff0000;}
    .on:visited {text-decoration:none; color:#ff0000;}
    .on:link {text-decoration:none; color:#ff0000;}
    a.on:hover {text-decoration:none; color:#ff0000;}


    Good Luck.
    Chris
  6. #4
  7. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Put the text you want to change in a <layer> tag (a <ilayer><layer>text</layer></ilayer> combo if you want relative (inflow) positioning. Onmouseover, do a document.write() to the layer, using the same string of text, in '<span class="overClass">text</span>' form, where 'overClass' styles the text as it was styled originally but with the desired changes. Onmouseout, the reverse. Don't forget to close() the document after wrting to it.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Location
    Canada
    Posts
    20
    Rep Power
    0
    Well, the <layer> tag got me closer, but still no cigar

    I may have to resort to JavaScript to do what I want, I'm just trying to avoid using many images to save download time...

    Thanks
    Smitty
  10. #6
  11. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    <html>
    <head><title>untitled</title>
    <style type="text/css">
    .out{font-family:"Comic Sans MS";font-size:16px;color:gold;padding-left:1px;}
    .over{font-family:"Comic Sans MS";font-size:22px;color:red;padding-left:1px;}
    .hover{font-family:"Comic Sans MS";font-size:16px;color:red;text-decoration:underline;}
    .hoverOff{font-family:"Comic Sans MS";font-size:16px;color:purple;text-decoration:underline;}
    .clk{font-family:"Comic Sans MS";font-size:22px;color:green;}
    td{font-family:"Comic Sans MS";font-size:16px;color:gold;}
    a{text-decoration:none;color:green;}
    </style>
    <script language="Javascript">
    var overContent1 = '<span class="over"><strong> alter a section of it</strong></span>';
    var outContent1 = '<span class="out"> alter a section of it</span>';
    var overContent2 = '<span class="over"> DESTROY NETSCAPE 4 !</span>';
    var overContent3 = '<a class="hover" href="#" onmouseout="lyrOverOut(inner2,outContent3,0)" ';
    overContent3+= 'onclick="alert(sExpl)">links</a>';
    var outContent3 = '<a class="hoverOff" href="#" ';
    outContent3+= 'onmouseover="lyrOverOut(inner2,overContent3,0)">links</a>';
    var sExpl = "The trick to hover effects is to remember that when you document.write() to ";
    sExpl+= "the Layer, you're rewriting the WHOLE document (everything inside the <layer> tags,";
    sExpl+=" and that includes the <a>nchors themselves) - and any event handlers assigned; ";
    sExpl+="you can, however, omit the new mouseover handler if it was a mouseover that ";
    sExpl+="called the .write() in the first place since the content will be changed again ";
    sExpl+="before a new mouseover can fire (by a mouseout event). Got that? ";
    sExpl+="Same with rewriting the _outs on an _out function call.\nOtherwise, ";
    sExpl+="include the entire HTML string that created the Layer's document.\n\n";
    sExpl+="Anything DIFFERENT in the new string will represent the effect.\n<div> and <span> ";
    sExpl+="created Layers, which further blur() the distinction between the Layer object and ";
    sExpl+="its .document object, are also buggier. Really.\n\nBy tracking state, you can return ";
    sExpl+="any link to a 'visited' color instead of to the original.\n\nAnd - Link objects do ";
    sExpl+="support CSS (barely)\n\n\nadios.";
    function lyrOverOut(lyr,content,move) {
    lyr.top += move;
    lyr.document.write(content);
    lyr.document.close();
    lyr.parentLayer.clip.width = lyr.clip.width = lyr.document.width;
    lyr.parentLayer.clip.height = lyr.clip.height = lyr.document.height;
    }
    function clickMe() {
    document.clickIt.visibility=(document.clickIt.visibility=='hide')?'show':'hide';
    }
    window.onload = function(){window.inner1 = document.outer1.document.inner1;
    window.inner2 = document.outer2.document.inner2;
    document.clickIt.left=20;
    document.clickIt.top=window.innerHeight-100;
    document.clickIt.document.write('<span class="clk">Click It</span>')
    document.clickIt.document.close();
    inner1.visibility='show'}
    </script>
    </head>
    <body bgcolor="salmon">
    <br><br><hr><br><br>
    <table align="center" cellspacing=0 cellpadding=0 border=0>
    <tr>
    <td width=450 colspan=2 align="right">
    Let's say you have some text on a page, and that you'd like to
    </td>
    <td align="left" valign="middle">
    <ilayer id="outer1"><layer id="inner1" visibility="hide"> alter a section of it_</layer></ilayer>
    </td>
    <td width=150>_
    </td>
    </tr>
    <tr>
    <td colspan=4 align="left" valign="middle">
    every time you run your little_<a href="#" onmouseover="clickMe();lyrOverOut(inner1,overContent1,-5)"
    onmouseout="clickMe();lyrOverOut(inner1,outContent1,5);"
    onclick="alert('The .write() function:\n'+lyrOverOut+'\n\nThe '+
    'content:\n'+overContent1)">mouseover</a> a link or another item on the page. It's more problemmatic <br>in Navigator 4 than those 'other browsers' - but not impossible! Use <span
    style="font-family:Courier;color:black">&lt;table&gt;</span>s with nested <span
    style="font-family:Courier;color:black">&lt;ilayer&gt;&lt;layer&gt;&lt;/layer&gt;&lt;/ilayer&gt;</span>s for positioning. Ugh!
    </td>
    </tr>
    <tr>
    <td width="10%" valign="bottom"><br>
    Change <ilayer id="outer2"><layer id="inner2"><a class="hoverOff" href="#"
    onmouseover="lyrOverOut(inner2,overContent3,0)">links</a></layer></ilayer>
    </td>
    <td valign="bottom"> too...
    </td>
    </tr>
    </table>
    <br><br><hr><br><br>
    <div align="right">
    <table border=0>
    <tr><td>___[another item on the page]</td></tr>
    <tr align="center"><td><ilayer><layer bgcolor="green" onmouseover="this.bgColor='red'" onmouseout="this.bgColor='green'">
    <a href="#" onmouseover="clickMe();lyrOverOut(inner1,overContent2,-5)"
    onmouseout="clickMe();lyrOverOut(inner1,outContent1,5)"
    onclick="alert('The .write() function:\n'+lyrOverOut+'\n\nThe content:\n'+overContent2)">
    <span class="out">&nbsp;</span></a>
    </layer></ilayer></td></tr>
    </table>
    </div>
    <layer id="clickIt" visibility="hide"></layer>
    </body>
    </html>

    [Edited by adios on 02-28-2001 at 11:14 PM]
    Last edited by adios; September 21st, 2002 at 09:59 PM.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2001
    Posts
    6
    Rep Power
    0

    Preferred order of pseudo classes on the A element


    When you are applying pseudo-classes (such as :hover) to an element, remember that the order in which you list them in your style sheet is important. In CSS, properties applied to an element later in your style sheet take precedence over properties applied earlier. So, if you place the :hover pseudo-class, for instance, before the :visited pseudo-class, none of your visited links will display the :hover properties. The preferred order for placing pseudo-classes on the "A" element is:

    a:link
    a:visited
    a:hover
    a:active

    The :active pseudo-class, which displays when the A element is either clicked or selected by the keyboard, should follow :hover because otherwise the :active properties would never display when the A element is clicked (although they would if activated by the keyboard).

IMN logo majestic logo threadwatch logo seochat tools logo