SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE doesn't work with :hover on <p>...

    I have this html:
    <p class ="ciega">Este es el primer renglon.<br />
    and this is the second one row.</p>
    <p class="another">...... </p>

    and , at css style:
    p.ciega { background-color: #e2edff;
    color: e2edff; }
    p.ciega:hover {
    width: 70%; margin-left: 25px;
    background-color: blue; color: yellow;}
    The code above works at FF ; but it doesn't at IE.

    What I pretend get with that code is basically:
    when the user puts the mouse over the <p .... code,
    shows the content. and then hides it when the mouse is out of it.

    what can i do to get results with IE ?
    (I am so sorry, my english is very poor).

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Internet Explorer only supports the :hover selector on links (<a> tags). You can do some hacky type things to try to make it work sometimes... but this is probably a better task for a little JavaScript than CSS hacks.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    well, it seems I am lost.

    I did try with this code:

    at javascript:

    function initia() {
    if (!document.getElementById) {return ; }
    var xy = document.getElementById('ciega');
    xy.onmouseover = mouseover;
    xy.onmouseout = mouseout;
    }

    function mouseover(e) {
    var xy = document.getElementById('ciega');
    xy.style.color = '#000000';
    }

    function mouseout(e) {
    var xy = document.getElementById('ciega');
    xy.style.backgroundColor = '#FFFFD5';
    xy.style.color = '#FFFFD5';
    }

    window.onload = initia;


    What's wrong with that code?
    thanks by your time and help.
    jaci.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're targeting an ID that doesn't exist (since the value is a class).

    I strongly suggest you use whatever:hover instead, since that will force IE 5/6 to use :hover on everything, not just links (note, this is the same link that Dan Grossman provided):
    http://www.xs4all.nl/~peterned/csshover.html

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2005
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solved my problem.

    I solved my problem: I was using <p class="ciega"... , and changed to <p id = "ciega"... and with javascript code using obj.style.........
    Thanks very much by your help. (advice).

    Jaci.


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
  •