Click to See Complete Forum and Search --> : Special Hover Effect
Ravasz
10-30-2007, 03:02 PM
I assume this is done in CSS, but I'd like to know how...
You see the blocks of text on the right side of my journal?
http://yaplog.jp/hotrobotsex/
If you put your mouse over those first two blocks, it not only puts a background color with a border around it, but specifically changes the link color too. How is that done?
dtm32236
10-30-2007, 04:07 PM
CSS:
.linkEffect {
color:#666666;
border:none;
background-color:none;
}
.linkEffect:hover {
color:#999999;
border:1px solid black;
background-color:#0000ff;
}
Major Payne
10-31-2007, 12:39 AM
Seems to only work in IE or similar driven engine as Firefox did not reproduce the hover effect.
Ron
WebJoel
10-31-2007, 06:57 AM
Really? I see the effect in Firefox but not IE. IE only honors the psuedo-class on anchors, and if these (as written in the example above) are not anchors, IE can't use them without a iefix.js
salmanshafiq
10-31-2007, 07:33 AM
try this code hope it would be help full for you if any problem then you can ask me
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a {
color:#666666;
border:none;
background-color:none;
display:block;
width:100px;
}
a:hover {
color:#999999;
border:1px solid black;
font-size:16px;
background:#000000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<a href="#">TEst <br /> TEst <br /> Test</a>
</body>
</html>
salmanshafiq
10-31-2007, 07:35 AM
if any problem tell me i'll make the exact link and style for you
Major Payne
10-31-2007, 03:54 PM
Really? I see the effect in Firefox but not IE. IE only honors the psuedo-class on anchors, and if these (as written in the example above) are not anchors, IE can't use them without a iefix.jsYep. Tried it again in Firefox. Only get underlined links on hover. Effect looks very good in IE still. There are 24 scripts used for the site. 15 embedded. Probably is an IE fix in there somewhere. Two style sheets being used.
Ron
Centauri
10-31-2007, 06:57 PM
I see the effect in Firefox but not IETried it again in Firefox. Only get underlined links on hover. Effect looks very good in IE still.
Interesting - I see the effect in both FF 1.5 and IE6 ....
Major Payne
10-31-2007, 09:00 PM
I'm using Firefox version 2.0.0.8. You really should update FF as they do not issue patches for their security corrections. Each version of FF is a security/bug fix. Version 2.0.0.9 will be out soon as they didn't get some security problems totally fixed in 2.0.0.8.
Ron
Centauri
10-31-2007, 09:19 PM
I use FF 1.5 and IE6 (and Opera) on my main machine, and have FF2 and IE7 set up on my laptop which connects through my network (when it is plugged and turned on, which it isn't at the moment) - that way I can test my developments in multiple versions of the browsers without resorting to hacks to get multiple versions running on one machine. I use the older versions on my main machine as you HAVE to still cater for these.
Major Payne
10-31-2007, 09:39 PM
But you don't have to cater to the older versions of Firefox. Their versions are security/bug fixes. FF has been CSS2 compliant for as long as I've known it's been out. All other browsers are the ones that try to keep up with web standards and fail at the attempt as you know.
Ron
Centauri
10-31-2007, 09:53 PM
Well if the hover effect on the site in question works in FF 1.5 but not in FF 2, then there must be some differences - in this case, enough to test in both versions.
Major Payne
10-31-2007, 10:32 PM
No. I would say version 1.5 is allowing some non-compliant code or script to run because it's buggy or has a security problem which is why it works in that version. People need to keep FF updated and web developers/designers shouldn't be worried about the older versions of Firefox. I would never bother to check my stuff in an older FF version knowing that the CSS2 compliant browser currently being used will show me that my stuff meets the proper web standards. Except for all the accessibility ones which I only partly meet in my coding. But everyone has there own reasons for using/doing something a certain way.
Ron
Kravvitz
10-31-2007, 10:44 PM
It's being done with JavaScript. It works in IE5+/Win (though 5.0 doesn't support the partial transparency) and Firefox 1.5+ (Firefox 1.0 is reporting two JavaScript errors that are probably causing it to fail).
There are some minor changes to the rendering engine between Firefox 1.5.x (Mozilla 1.8) and Firefox 2.0.x (Mozilla 1.8.1). The changes from Firefox 1.0 (Mozilla 1.7.x) to Firefox 1.5 were more significant. JavaScript 1.6 was new to Firefox 1.5 and JavaScript 1.7 was new to Firefox 2.
@Major Payne do you test in IE at all then?
Edit: Major Payne, are you sure you don't have an extension blocking it in FF2? It works for me in Firefox 2.0.0.8 when I tell NoScript to allow scripts from the domains that the JS scripts are being called from.