0

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>
1

3 Answers 3

3

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

2
  • 5
    which is horrible if you ask me.
    – rlemon
    Commented May 7, 2014 at 15:47
  • What should it use? @rlemon I'm in favour of couleur
    – Albzi
    Commented May 7, 2014 at 15:55
1

Use

background-color: #e6ffea;

It's color, no colour.

0
0

Error is in your CSS file.

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

Should be

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.