Attributes of Hover tag

Cork Skate

Hi there,

Just wondering is there any attribute for the hover tag

a:hover {whatever}

that will speed up the changes ... i am basically trying to create a mouseover but the actual link takes about 2 seconds to change, i need it to change straight away.

Any idea ??


I hope i explained that OK !!

DonkeyStyle \o/

Are you using an image roll-over for this link?
If so, you should pre-load the images with a javascript.
I've never had this problem with standard text links, but then I'm not a CSS guru or anything.

Cork Skate

DonkeyStyle \o/ wrote:

Are you using an image roll-over for this link?
If so, you should pre-load the images with a javascript.

I want to try and stay away from images if at all possible.

I've never had this problem with standard text links, but then I'm not a CSS guru or anything.

TBH ... i have never noticed it before and i always use css

I would have thought there is something i could do to tweak it.

Eoin

Cork Skate wrote:

Hi there,

Just wondering is there any attribute for the hover tag

a:hover {whatever}

that will speed up the changes ... i am basically trying to create a mouseover but the actual link takes about 2 seconds to change, i need it to change straight away.

Any idea ??


I hope i explained that OK !!

You have to hold the mouse over the link for 2 secs before anything at all happens?

I don't have the same problem, can you post a snippet of the code that is causing the problem?

Cork Skate

eoin_s wrote:

You have to hold the mouse over the link for 2 secs before anything at all happens?

Yup ... thats it !!

I don't have the same problem, can you post a snippet of the code that is causing the problem?

a.normal:link {font-family: tahoma, arial; font-size: medium; color: red; background-color: #dddddd; text-decoration: none}
a.normal:hover {font-family: tahoma, arial; font-size: medium; color: black; background-color: #eecccc; text-decoration: none}
a.normal:visited {font-family: tahoma, arial; font-size: medium; color: red; background-color: #dddddd; text-decoration: none}
a.normal:active {font-family: tahoma, arial; font-size: medium; color: red; background-color: #eecccc; text-decoration: none}

That is the .css code

<a class=normal href=index.html>&nbsp;Homepage&nbsp;</a>

That is the html link !!

Eoin

Just tested that on IE and Firefox, and the hover worked immediately as expected. have no idea why that is happening to you at all

DonkeyStyle \o/

That code works fine for me (tested IE6 and Mozilla)... the links change straight away.
Does this roll-over problem happen if you just paste that code into empty html/css files?
ie. it is or isn't specific to that page or site?
Could there be a whole ton of images and javascripts lagging the browser in general?

P&L

that's quite vague and badly written (sorry!) CSS as well, might slow down you renderer a few milliseconds.

If you wanna post a sample full page with all the HTML and CSS, I can help you improve it.

Cork Skate

DonkeyStyle \o/ wrote:

That code works fine for me (tested IE6 and Mozilla)... the links change straight away.
Does this roll-over problem happen if you just paste that code into empty html/css files?
ie. it is or isn't specific to that page or site?
Could there be a whole ton of images and javascripts lagging the browser in general?

It doesn't seems to happen in empty/small files .... it is instant.

Thing is ... i have hardly anything on the page ...

a static gif ... 2.46 KB
animated gif ... 173 KB ... with a ten second loop.
jpeg image ... 48.5 KB

No javascript ..... and a table with three rows with two small tables imbedded, nothing huge tbh .... seems strange ..... what would slow it down ??

DonkeyStyle \o/

Cork Skate wrote:

animated gif ... 173 KB ... with a ten second loop.

This is what stands out for me...
Although you don't give much specific info on the gif... animated gifs can be real processor whores... like if it was playing at 15 frames per second, and going back to the start every 10 seconds? Or do you mean there are two frames that alternate every 10 seconds?
As a troubleshooting method, I'd temporarily remove the animated gif from the page and test it again.

dahamsta

The delay is caused by something other than CSS, most likely that GIF, as others have suggested. However your CSS could be much lighter -- you only need to provide the attributes that are going to change from the default (a.normal):

a.normal { font-family:tahoma, arial; font-size:medium; color:red; background-color:#dddddd; text-decoration:none }
a.normal:active { background-color:#eecccc }
a.normal:hover { color:black; background-color:#eecccc }

Your HTML is incorrect too -- your attributes should be quoted these days, and single spaces don't need to be represented by a HTML entity ( &nbsp ):

<a href="index.html" class="normal"> Homepage </a>

adam

Cork Skate

dahamsta wrote:

The delay is caused by something other than CSS, most likely that GIF, as others have suggested. However your CSS could be much lighter -- you only need to provide the attributes that are going to change from the default (a.normal):

a.normal { font-family:tahoma, arial; font-size:medium; color:red; background-color:#dddddd; text-decoration:none }
a.normal:active { background-color:#eecccc }
a.normal:hover { color:black; background-color:#eecccc }

Thats the job .... its working fine now after that ..... The gif is still there and all is good.

Just the question on the animation of the gif ..... it is one image but fades from opacity 100% to 0% and back to 100% in 3 seconds and does the same after ten seconds (i.e. ten secs static, then the fade in and out and then the loop) .... but all is working fine now.

dahamsta

Bizarre.