Change background of a DIV (no JS)

m-productions

As the title says, I want to make it so when your mouse goes over a div, the background color will change..., However, I can not use JS for this, needs to be 100% CSS, now im hopeing theres another way to do this, but so far, ive been told of one way (and I cant even get that to work) its as follows, I make a div like this

AftershockVibe

I tried to do something like this a while back and, unfortunately, never found a solution. I think I managed to con Internet Explorer into doing it but not Firefox.

I too wanted to make a "button" using a DIV with text inside. Now, I found I had problems when I tried to encapsulate the ?<div> within the <a> tag because <a> is supposed to be inline and <div> isn't and you're not supposed to put non-inline elements inside inline ones becasue then they'd be inline too, or somesuch.

Anyway, I managed to make the <div> change colour when you hovered, but unfortunately the link would only work when you clicked on the text itself. So while teh button would look like a button it would only actualyl work if you clicked on the text itself.

At the time I decided I'd prefer a tree-style menu anyway so stopped working on it. However, I have thought of a possible workaround since.

I don't know if this will work but you might want to try it:
- Put the <a> inside the <div>
- Force the size of the <a> element to be the same size as the <div> using CSS. Manual width/height or 100% should work.
- Use the hover effect as before on the <div> or possibly the <a> (I'm not sure which the browser will pick as being hovered over (both??))

Not sure if this will help but good luck.

Ranfaroth

As said, you can't put a div in a a.
And it's useless, since the simple way to achieve what you want is this single line :

#myDivID:hover {background-color : mycolor}

m-productions

snowboardalliance

Azmo

I'm just curious why you would want to use a div as a link?

welshsteve

Firstly, you cannot place a block level element such as a DIV inside an inline element such as an anchor tag. Therefore, you need to do what snowboardalliance suggested and set the anchor tag's display to block.

Here's the code you need.

Ranfaroth

welshsteve

Use my code above. It works in all main browsers