CSS background colour change on hover not working? [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 9 years ago.

Improve this question

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>

Answer 1

You are misspelling background-color. The spec uses American English.

Answer 2

Use

background-color: #e6ffea;

It's color, no colour.

Answer 3

Error is in your CSS file.

#index1:hover {
  background-colour: #e6ffea;
}

Should be

#index1:hover {
  background-color: #e6ffea;
}