Whatever:hover has stopped working

**xkratosx** · Jul 23, 2008 02:16

Hi,

Not sure what's going on, as just recently it was working fine on our site, but suddenly Whatever:hover has completely stopped working in both IE6 and IE7.

I simply have a link to the file in the body of my CSS like so:

Code CSS:

behavior:url('../../csshover2.htc');

I have also tried with a relative path, and also with a relative path, but still no joy.

Example usage:

Code CSS:

input:focus, textarea:focus{
	background-color: lightyellow;
}
#livesearch li:hover, #additionallive li:hover {background: #eee; color: #900}

Neither work at all in IE, but Firefox is fine. The focus above works great, the hover attribute is new but hover has worked fine in the past.

Have I set everything up correctly? I've tried deleting other javascript/css as a test and it's still not working :/

**xkratosx** · Jul 23, 2008 02:35

Just tried creating a test page, still no luck:

Code HTML4Strict:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
	body {behavior:url('csshover2.htc');}
	.test { background: #eee; width: 300px; height: 300px }
	.test:hover { background: red; }
	</style>
</head>
 
 
<body>
	<div class="test">Testing</div>
</body>
</html>

**Karpie** · Jul 23, 2008 06:31

I've never been able to get those .htc hacks to work. Can't help you, sorry

**xkratosx** · Jul 24, 2008 01:45

Yeah, it seems a little flaky, but it's fantastic when it works, especially when so much of the site I've just made relies on it

**Dan Schulz** · Jul 25, 2008 04:21

Did you set the MIME type in the .htaccess file that resides in the same directory as the file by any chance?

If you have but it still doesn't work, try checking to make sure the paths are correct; failing that, move the .htc file and the MIME type declaration to the domain root (and remapping the paths from there).

If tha doesn't work, contact your hosting provider to see if they changed any settings on the server recently.

**xkratosx** · Jul 28, 2008 01:08

Many thanks for the reply Dan.

I've just checked the .htaccess file and it says:

AddType text/x-component .htc
So hopefully that's okay.

It's already in the domain root (wwwroot) too.

It's all hosted on a local network, on an apache server, to be honest they're always playing around with the settings but I'm not sure what could effect this.

**xkratosx** · Jul 28, 2008 01:11

Actually, it must be a problem with my code. Just tried it on another server and it's still not working.

I simply copied test.html (the code from my second post) along with the htaccess file and the htc file, and had no luck at all

**Dan Schulz** · Jul 30, 2008 14:11

Okay, then link the HTC file to it like so:

behavior:url('/csshover2.htc');

**Paul O'B** · Jul 31, 2008 05:21

Hi,

I just copied your code from post #2 and pasted it exactly as you have it without changing anything and it worked straight away. (I already have the whatever hover file in the same directory.) Therefore there is nothing wrong with the code as such

Therefore the issue is as Dan said in that you have moved the hover file or are not pointing to the correct location or your server settings have changed.

**xkratosx** · Jul 31, 2008 06:22

Many thanks for the replies guys, and pmob for testing the code.

I'm in a right mess though unfortunately, it just isn't working and I have no idea why.

I've tried adding "/csshover2.htc" to point it to the root, but no change. I also tried copying and pasting the code from my test post above to try in Firefox (the code that worked for pmob) but now it's not working at all with classes, only IDs.

It's so annoying, becuase there's a few fundamental things on the site that require this, yet it suddenly stopped working. The site's live too and has quite a few visitors (intranet btw) which makes it even worse

**xkratosx** · Jul 31, 2008 06:29

Doesn't even hover in Firefox now.

Code HTML4Strict:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
	body {behavior:url('/csshover2.htc');}
	.test { background: #ffc; height: 200px; cursor: help; }
	.test:hover { background: #900; font-size: 999%; color: #fff }
	</style>
</head>
 
 
<body>
	<div class="test">Testing</div>
</body>
</html>

.. yet changing it from class to ID (and . to #) works fine. What.

**Paul O'B** · Jul 31, 2008 06:58

Doesn't even hover in Firefox now.

It will work in Firefox if you add a doctype and get out of quirks mode.

Do yu have a working copy of the exact problem that we can look at.

**xkratosx** · Jul 31, 2008 07:53

You sir, are my hero.

Just added a doctype and it's working a treat now, thank you very much!

Managed to get the live site working now too, but :focus isn't working - it was fine before, but now it's stopped.

Edit: Doesn't work on that test page either:

Code HTML4Strict:

<!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" xml:lang="en">
<head>
	<style type="text/css">
	body {behavior:url('/csshover2.htc');}
	.test { background: #ffc; height: 200px; cursor: help; }
	.test:focus { background: #900; font-size: 999%; color: #fff }
	</style>
</head>
 
 
<body>
	<input type="text" class="test" value="Testing" />
</body>
</html>

It'd odd, as like I said it was working fine before, and csshover2.htc should have the :focus attribute support right?

Sorry to be a pain, but this has really got me stumped :/

**Paul O'B** · Jul 31, 2008 09:41

The comments at the site say that it supports focus in a roundabout way (it uses "unknown" to trigger focus) but I can't see an example anyway where focus is working in IE6. The :active seems to work OK but :focus (which IE6 doesn't understand anyway) isn't working in my version either.

This is more of a javascript question now that a css one

**xkratosx** · Jul 31, 2008 12:15

Many thanks for the reply, that's really odd though, as I'm absolutely certain the focus attribute was working fine before.

I'll change it to :active and see how I get on anyway, thank you

**xkratosx** · Aug 4, 2008 06:19

:active doesn't work either unfortunately

Any suggestions please guys? Hover isn't working in some cases either, it all just seems slightly flaky...

**Paul O'B** · Aug 4, 2008 06:49

Hi,

I can't seem to get the focus working on that whatever:hover (despite reading the instructions which say it should work). The active seems to be working ok though but of course isn't the same as focus.

Looking at the code there seems to be something wrong here.

Code:

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,

If you add "unknown" before the a|input|textarea check you can get it working.

Code:

var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|unknown))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,

But of course that applies it to all elements and not just a, input or textarea as per normal.

I'm afraid my regular expression knowledge is nil so it seems to be a javascript question now.

**xkratosx** · Aug 5, 2008 00:22

Argh! The forum keeps losing my posts.

The :hover attribute is working an absolute treat now - not bad at all for someone with nil regular expression knowledge! Very impressive

Thank you so much

User Tag List

Thread: Whatever:hover has stopped working

Thread Tools

Display

Whatever:hover has stopped working

Bookmarks

Bookmarks

Posting Permissions