CODEWITHSUNDEEP
htmlcsshover
user2097812
user2097812

Reputation: 69

How do i make a div box change colors when hover overed?

I'm trying to make a white div box turn red when it's hover overed, so far i have this in my css:

#white{
width: 90px;
height: 90 px;
background-color:white;
position: absolute;
top: 10px;
left:10px;
}


a:hover #white{
color:red;
width: 90px;
height: 90 px;
position: absolute;
top: 10px;
left:10px;
}

and this in my html:

<div id="white">
</div>

but it doesn't work at all, help please?

Upvotes: 0

Views: 6618

Answers (3)

Daniel Imms
Daniel Imms

Reputation: 50149

The problem is a:hover #white, you're targeting an <a> tag that is being hovered with a child that has id="white".

You want to use this:

#white:hover {
  ...
}

You're also on the hover event you're using color and not background-color.

http://jsfiddle.net/xuj44/1/

Upvotes: 1

Allan Crabtree
Allan Crabtree

Reputation: 11

This question has been answered but it seems like you are trying to run before you can walk, http://w3schools.com/ is possibly where every front-end web developer began learning html/css - it will give you the basic fundamentals of the language so its well worth reading through each section. Even seasons developers have to pop back to it occasionally just to jog there memory. Good luck, and keep trying :)

Upvotes: 0

patricksweeney
patricksweeney

Reputation: 4022

You need to go back and read a bit more about HTML and CSS basics.

  1. You are targeting a link that doesn't exist.
  2. You don't set a background color for the hover state, so how could it change? You change the TEXT color, but not the background, and your question says you want to change the color of the
  3. You have a space between 90 and px, so that breaks your CSS.

Something like this is probably what you want: Link

Upvotes: 3

Related Questions