Forum Moderators: not2easy
I have a 4 column fluid layout and I'm trying to just have the background switch from a dark grey to a lighter grey on hover.
Is it possible to do this? Be it CSS or JS?
I've tried at least 10 different ways to get this working so I'm not going to bother posting all the code. If someone has an example can they post it.
Here's the latest attempt :P Works on FF but not IE naturally. The following was using bg images.
#left1, #left2, #left3, #left4 {
position:absolute;
left:0;
top:60px;
bottom:50px;
width:25%;
z-index:4;
overflow:auto;
text-align: justify;
background-image: url(cell-dark.jpg);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top;
}
* html #left1, * html #left2, * html #left3, * html #left4 {height:100%; top:0; bottom:0; border-top:60px solid #fff; border-bottom:50px solid #fff;}
#left1 {left:0;}
#left2 {left:25%;}
#left3 {left:50%;}
#left4 {left:75%;}.comments-body, #commentPreview {
margin: 1em 0;
padding: 1em;
}
#left1:hover, #left2:hover, #left3:hover, #left4:hover {
background-image: url(cell.jpg);
}
.inner {display:block; padding:10px 10px 10px 10px;}
h3 {
font-family: Arial;
font-size: 18px;
color: #193E85;
}
Thanks.
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
</HEAD>
<STYLE>
A:hover{background-color:red}
</STYLE>
<BODY>
<P>
<TABLE cellSpacing=1 cellPadding=1 border=1>
<TR>
<TD><A href=""> </A></TD>
<TD><A href=""> </A></TD>
<TD><A href=""> </A></TD></TR>
</BODY>
</HTML>
<script type="text/javascript">
function changeColor(id, color) {
element = document.getElementById(id);
event.cancelBubble = true;
oldColor = element.currentStyle.background;
element.style.background = color;
}
</script><div id="left1" onMouseOver="changeColor(this.id, '#0F0');" onMouseOut="changeColor(this.id, '#F00');">left1</div>
Or you can add an .htc file to load so that everything with an :hover in your stylesheet will work.
You can find this code here: Whatever:hover [xs4all.nl]
See the comment at the top of the file on how to load this.
Hope this will help you :D.
1. csshover.htc - I'm just learning about this now. It's available at http://www.xs4all.nl/~peterned/csshover.html [xs4all.nl]
2. IE7 (by Dean Edwards, not the Microsoft browser). I've never used this, but seems similar to csshover in some aspects. http://dean.edwards.name/IE7/ [dean.edwards.name]
And the first i use with some sites, and it works well.
No problems untill now :).
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT TYPE="text/javascript">
<!--
function mouseover()
{
document.getElementById("thediv").style.backgroundColor='black';
}
function mouseout()
{
document.getElementById("thediv").style.backgroundColor='red';
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<DIV style="width:200px;height:200px;border:solid thin black" id=thediv onmouseover="mouseover()" onmouseout="mouseout()">
<DIV>
</BODY>
</HTML>
This is for my own curiosity.
Is a majority of JS in IE still being blocked still? I probably should have asked that to begin with. I'm still going to use JS version so it works on both platforms.
Is a majority of JS in IE still being blocked still?
Still? Not sure what you mean here. By default, IE comes with JavaScript enabled, so the answer to your question is probably no.
I'm still going to use JS version so it works on both platforms.
Not sure what you mean by that either. The correct way to include javascript is like so:
<script type="text/javascript">
...
</script>
Note, you should NOT use "version" if you're trying to create valid code (and I really see no use for version anyway).
