SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Zealot NZ Joe's Avatar
    Join Date
    Apr 2001
    Location
    Kapiti, New Zealand
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change link text with :hover

    Hi,


    I am rebuilding http://www.justice.govt.nz/maorilandcourt/ in HTML/CSS without the Javascript and images for text. The funtionality has to be the same and the look too (as much as possible). The problem I have is that in IE, the text is not changing when I hover over the links (It is meant to change from the English to Maori, and it works in Firefox and Opera). Any help appreciated.

    HTML snippet

    Code:
     <div id="faq">
      <a href="faq.htm">
       <img src="images/buttong.gif" width="26" height="25" alt="FAQ">
       <span class="en">FAQ</span>&nbsp;<span class="mi">Rarangi Patai</span>
      </a>
     </div>
    CSS

    Code:
     
    a span.en, a:hover span.mi {
     display: inline;
    }
    a:hover span.en, a span.mi {
     display: none;
    }
    Gravity always wins

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is a known bug with ie and it requires that a property must change on a:hover otherwise the span won't show.

    Adding this to your above code will make it work in IE:
    Code:
    a:hover {background:#FFFFFC}
    Paul

  3. #3
    SitePoint Zealot NZ Joe's Avatar
    Join Date
    Apr 2001
    Location
    Kapiti, New Zealand
    Posts
    182
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B. Works great, and even in IE4
    Gravity always wins

  4. #4
    Starting to-digg-in ********* jamesxv7's Avatar
    Join Date
    Oct 2003
    Location
    Island of Puerto Rico @ the Caribbean
    Posts
    873
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi:
    If you want more fun with the hover CSS rule. Try this:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Playing with hover</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    a:link { text-decoration:none; }
    a:hover {background:#FFFFFC; background-image:url(hoverline.gif); background-position:bottom; background-repeat:repeat-x; text-decoration:none;}
    </style>
    </head>
    
    <body>
    <a href="http://www.ecodig.com">Use any URL here, see the nice hover decorarion.</a>
    </body>
    </html>
    Hope you enjoy it!
    Attached Images Attached Images
    Last edited by jamesxv7; Mar 9, 2004 at 22:03. Reason: Add the Hover image file.
    James: Ecodig - My Blog - My Gallery
    Validate your sites: CSS - HTML/XHTML
    Without faith you are lost.

  5. #5
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, i have this problem.

    i did all the coding, to change links when hovered over.
    except for the
    a.hover {background:#FFFFFC}
    because when i click to save changes, it changes the "#" and adds some numbers.
    so, instead, i changed the value slightly.
    but, it just shows both the text for the link, and the text for the link when it's hovered, one next to the other.
    here is the page i'm working on, the text in the left box is what i am having problems with.

    could you help me?
    alex.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MissAlexy
    well, i have this problem.

    i did all the coding, to change links when hovered over.
    except for the
    a.hover {background:#FFFFFC}
    because when i click to save changes, it changes the "#" and adds some numbers.
    so, instead, i changed the value slightly.
    but, it just shows both the text for the link, and the text for the link when it's hovered, one next to the other.
    here is the page i'm working on, the text in the left box is what i am having problems with.

    could you help me?
    alex.
    Hello, and welcome to Sitepoint. You're declaring an anchor with a class of hover. If you want to apply a hover effect to the anchor, you need to change the period to a semi colon so it looks like this:

    a:hover

    Then you'll be able to change the background color when you hover over the link. Also, don't forget to assign a color value to the rule as well, even if you only use color: inherit; instead of an actual color value.

    You can learn more about creating hover effects here:
    http://www.sitepoint.com/forums/show...79#post2957279

  7. #7
    Non-Member Webby007's Avatar
    Join Date
    Sep 2005
    Location
    UK, England
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have IE4! - did I hear that right! :O

  8. #8
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay.
    i don't think you got me...

    so i have this CSS coding:



    a span.sm, a:hover span.lg {display: inline; }

    a:hover span.sm, a span.lg {display: none; }

    a:hover {text-colour: 000000}


    and then a bit of the HTML is:



    <div id="aboutme">
    <a href="http://">
    <span class="sm">cold</span>&nbsp;<span class="lg">i like the cold side of the pillow</span>
    </a>
    </div>



    so, it's supposed to jut show "cold", and when you hover over it, it'll say "i like the cold side of the pillow"

    but it just shows

    "cold i like the cold side of the pillow".

    help please?

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yup, I have Internet Explorer 3, 4, 5.01, 5.5, 6 and 7(RC1) running simultaneously on the same system without the need for a virtual machine. Only IE4 is not working, and that was only after I upgraded from IE6 to IE7RC1 as my default IE installation.

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well for starters, you have 374 HTML errors and at least 205 CSS errors on your page. I also saw two different layouts trying to load at the same time. You may want to take a day off, sit down and fix them all, starting with the HTML errors, then worry about the CSS.

    And for the record, I tested your page in FireFox, and it took over five minutes to load.

  11. #11
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh dear.
    haha.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    o, it's supposed to jut show "cold", and when you hover over it, it'll say "i like the cold side of the pillow"
    The code on its own seems to be working ok (apart form the fact there is no property as text-color:! It should be color if you want to change the text color or if its just to counter the ie bug then use visibility:visible as below.).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    a span.sm, a:hover span.lg {display: inline; }
    a:hover span.sm, a span.lg {display: none; }
    
    a:hover {visibility:visible}
    
    </style>
    </head>
    <body>
    <div id="aboutme"> <a href="http://"> <span class="sm">cold</span>&nbsp;<span class="lg">i like the cold side of the pillow</span> </a> </div>
    </body>
    </html>

  13. #13
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh my god.
    thank you so much

    just one more thing, if i have lots of links, how can i make then be next to each other?
    because right now theyre one underneath the other.
    do i need to take something out?

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It depends how you have organised them in the html. Links are inline elements by default and will align next to each other anyway. If you have them contained in block elements such as p tags or have made the links display:block then you will need to float them next to each other.

    If you have lost of links then they should probably be contained within a list structure and then you can float the li items next to each other by applying float:left to them. (or make the list and the anchors display:inline and they should still line up alongside.)

  15. #15
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay.
    so part of it is:

    <div id="aboutme">
    <a href="http://">
    <span class="sm">cold</span>&nbsp;<span class="lg">i like the cold side of the pillow</span>
    </a>
    </div> <div id="aboutme">
    <a href="http://">
    <span class="sm">hate</span>&nbsp;<span class="lg">i hate anything blackcurranty</span>
    </a>
    </div> <div id="aboutme">
    <a href="http://">
    <span class="sm">pjs</span>&nbsp;<span class="lg">nighties pwn pjs</span>
    </a>

    but it shows up as

    cold
    hate
    pjs


    and i want it to say

    cold hate pjs

    anything i can do?

  16. #16
    SitePoint Member
    Join Date
    Sep 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh, and one last thing.
    i promise.

    how do i get the text to be black when it's hovered over?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ul#aboutme{
    	list-style:none;
    	margin:0;
    	padding:0;
    }
    ul#aboutme li{
    	display:inline;
    	margin-right:20px;
    	position:relative;
    }
    a span.sm, a:hover span.lg {display: inline; }
    a:hover span.sm, a span.lg {display: none; }
    a:hover {visibility:visible;color:#000;}
    
    </style>
    </head>
    <body>
    <ul id="aboutme">
    	<li> <a href="http://"> <span class="sm">cold</span><span class="lg">i like the cold side of the pillow</span> </a></li>
    	<li> <a href="http://"> <span class="sm">hate</span><span class="lg">i hate anything blackcurranty</span> </a></li>
    	<li><a href="http://"> <span class="sm">pjs</span><span class="lg">nighties pwn pjs</span> </a></li>
    </ul>
    </body>
    </html>


Bookmarks

Posting Permissions

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