Grow your CSS skills. Land your dream job.

Strange problem with whatever:hover [IE :hover/rollover fix]

  • luk
    # July 8, 2009 at 5:52 pm

    Hey everybody,

    I have some strange issues with the whatever:hover .htc script from here, I use it without problems on this site but there’s the target a button-element, a drop-down…just form elements to make it simple. I was stunned by the simplicity of this script (yeah, I read that it’s not valid and so on, but what to do with this crap of IE…) and wanted it to use in the project here (it’s a developement page and far from perfect!).

    The script works from time to time, that’s the frustrating thing on this one =)…to be more precise: It works, when you go on the page with IE, and then hit F5 and suddenly the li:hover works (FF and Chrome don’t have any problems with it…like most of the time). I thought first, it has to be a problem with the php include_once for the head section (and in there are the css files) so I pulled the behavior: url(csshover3.htc); out of the css file and made it inline css on the body-tag of just the pages I needed it (Profil, Kontakt) but that didn’t help.

    It simply looks like that:

    Code:

    I also had it in the normal style.css as also in the style_4_crappy_ie.css and also as separate <style></style>…and now I don’t know further^^, searched in the net but found nothing helpful, just another solution called "Suckerfish" from here, I didn’t try it until now, because somehow I like the whatever:hover-way, it’s not valid but elegant =)…

    maybe somebody of you guys ever had the whole :hover-Problem with IE and knows a good solution to it? The main goal is to make a li-tag "hoverable" in IE, any ideas are welcome =)!

    thx in advance for your help!

    EDIT: I tried it with suckerfish and on the li-items it works so far but it’s really more work than with the whatever:hover and it can’t work with js turned off and you have to specify a js-function for every type of element you want to :hover, in my case form elements AND li-elements (beside the a-elements which work luckily in every browser =P). To the "not working without js thing": Would the csshover3.htc work without javascript?? No, it doesn’t work…so therefore is no reason to not take the normal js way. Another question: Is out there a way to do this suckerfish-thing (doesn’t look that complicated to me, but I’m not a js master…) with jQuery in a lightweight way???

    EDIT 2: OK, I found a solution, javascript seems to be required to get IE to do what I want (if somebody knows a pure css solution to make IE hover everything, let me know =D)…I already use jQuery and wanted to do this suckerfish thing with it to save some lines of code. It’s done like this:

    Code:

    and the css for it (it’s just the part in the style_4_crappy_ie.css, normally I would like to do it with :hover and so do I with real browsers…):

    Code:
    ul.speech-list li.jhover {
    background: #FAFAFA;
    border-bottom: 1px solid #FAFAFA;
    }
    input.jhover, textarea.jhover, select.jhover {
    background: #BE0000;
    color: white;
    opacity: 0.75;
    -webkit-transition: opacity 0.2s linear;
    }

    BUUUT =), I’m getting crazy about a very little detail I thought I have in 2 seconds but NOOO, I’m on it for over 2 hours and I don’t get it…

    I have given a class of "first" to each top/first li element because I did some horizontal separators and didn’t want one on top of the list. But when somebody rolls over the top list-item, I would like to add a little dark gray 1px top-border to the first item, I thought it’s looking better…and so did I in the normal FF/Chrome/Safari CSS and there it works, check it yourself (don’t use handicapped browsers!)…so I tried to add this top-border with the jQuery javascript on hover, just a little sidething to the existing function, but I gave up 10 minutes ago =/…maybe someone is more into jQuery and knows the trick?

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".