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

[luk]

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?

[Author]

Posts