I've been trying to figure out why my :hover property isn't working. I don't know if there is just something really simple I'm missing. I have a Div acting as an empty rectangle of colour that I want to change when I hover over it, but nothing happens when I do. Here is the code:
CSS
#leftcontainer {
width: 560px;
height: 480px;
float: left;
margin-right: 10px;
}
#rightcontainer {
width: 370px;
height: 480px;
float: left;
}
#index1 {
width: 560px;
height: 195px;
float: left;
margin-bottom: 10px;
display: block;
}
#index1:hover {
background-colour: #e6ffea;
}
HTML
<div id="bodycontent">
<div id="leftcontainer">
<div id="index1"></div>
<div id="index2"></div>
<div id="index3"></div>
</div>
<div id="rightcontainer">
<div id="index4"></div>
<div id="index5"></div>
</div>
</div>