SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stop IE text hover priority

    The problem.

    I'm using jQuery to create a hover effect when a user hovers over a div.
    This is fine, as usual all browsers except IE do what I need of them.

    Inside my divs I have some text and to get the whole div area to be the link I have simply placed an anchor (last in the div in html) and abs pos'd it, given it a z-index and displayed it as block so that it is now the whole div as a link.

    But because of the text, IE is giving priority to the text (unhelpfully trying to be helpful) so when I hover the div, if I hover into the text area it is taking the hovered stated off of the div.

    I'm not really sure how better to explain this. but I need to stop IE bringing the text to the front.

    I've searched but not found a solution, probably because I'm not sure what I'm looking for.

    Any help, or a point in the right direction would be really helpful and appreciated,


    Thanks

    [EDIT]
    This happens in all versions of IE inc 9

  2. #2
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know exactly what you mean. It's a long time since I tried this idea (opted not to use it) but I think, if I recall correctly, that it's as easy as adding a colour for hover on each text element (p, h*, etc.) in the div and setting the cursor to pointer for each element. That should probably give you the seamless appearance that you want, at least in more recent versions of IE.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunatly i cant use a bg color because the hover area is slightly transparent over another image and also unfortunatly it's not the cursor changing that's the problem, I'm using jquery fades and because IE is registering the hover twice, it sort of flickers if I hover between the text and the container.

    Thanks for the reply though.

  4. #4
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't mention anything about a background colour. I meant your link hover colour.

    But if you are using jQuery already, why don't you use biggerlink and fix your problem that way?

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    48
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seemed to do something but not quite fixed it completly, thanks though I'll see if I can get this to work.

  6. #6
    SitePoint Addict
    Join Date
    Mar 2010
    Location
    UK
    Posts
    281
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide a link to an example of your page? Perhaps I or someone else can see why it's not quite there yet.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Usually you can just give IE a fake background image and that's enough to stop the effect you see.

    .test a:hover{background:url(fake.gif) no-repeat -1px -1px}

    Or use 1px x 1px fully transparent gif if you don't want missing images in your server log.

    You might be interested in this old quiz (no 2) which shows similar solutions.


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
  •