₦airaland Forum

Look at the attached two images.
It has three divs.
I want a situation where when a user hovers over a div, the whole background that is carrying the three divs will change to the h1 text color of the div hovered.
For instance, in the two images attached. By default, the background is in semi-black color.
But it turns to the blue color of the h1 in Div One when that div was hovered.

I know one can easily achieve this using js.
However, I need someone here that can do that with pure css.

Let's give it a try.

Dis 1 na physic or english or shuld i call it music............. I 8 hearin stuffs lyk dat

So nobody can help me do this?

@Op... Do want the background-color to change when hovering the box?

Yes. I want a situation where if a user hovers on any of the box, the background will change to the color of the text in that box he hovered.

Like this.

i am not on my computer now to try it and also i am a learner but this idea may work.

1. create four backgrounds with one with the default color then the other three background should have the three different colors you want to change to.
2. align them on each other,
3. this is where i am not sure which one will work but
-----either make the default background have an z-index of 1 while others have 0.
so now you use img a:hover{z-index:2;}
-----or you can set the other three backgrounds as display:none then use img a:hover{display:block;} but here to the three backgrounds with display none should have a z-index higher than the defaul background.


how i wish i can try it out now....pls let me know if i got it...i love to learn and hey i dont know any JavaScript

thank u. but i want someone that will code it. remember there are no images there. just three divs. i want a situation where if one hovers over one div, the main background that carry the three divs wil change to the color of the text of that particular div that was hovered. when u hover out, the background will return to its default bg color. pure css. no js. who can do it for me?

GraphicsPlus: thank u. but i want someone that will code it. remember there are no images there. just three divs. i want a situation where if one hovers over one div, the main background that carry the three divs wil change to the color of the text of that particular div that was hovered. when u hover out, the background will return to its default bg color. pure css. no js. who can do it for me?

Ok bro, as i said i didnt even try that but i just found out now that it will not work as i said though that can give you an insight..i will try to make it an assignment to night.

javascript or jquery will have been the best solution though but i know css can do it also.

Js may not be the best solution. What if js is turned off in the user's browser? I want someone that wil do it with simple css.

If you are coding with html5 Javascript is your best option

^^ Javascript cannot be a best option for something one can do with pure css.
You cannot turn off css, but a user can disable javascript.
I need someone that will do that with css only.
Thank u.

Alas! all them gurus are gone. This is a very simple thing to do with css, especially the latest version, using all them new selectors and hover effects, must speed to work now, if i have time maybe. . .

okay i think i just did it

http://jsfiddle.net/326ey/

@Dhtml, css2 may even do it.
@adewa, you tried, but i want the whole box div to be hovered, not just the text. Again, i dont want an anchor link.

I want it like this:

<div class="box"><h1>DIV ONE</h1></div>

Then i want when the box div is hovered, the background carrying the three divs will change to the color of h1 text in that particular div.

The background may not necessary be a body background. It may be a big background carrying the 3 divs.

Building on adewa's solution, change, for instance, .box a:hover to .box:hover

For effect, you can use CSS to change the cursor as you hover over the entire box.

By the way, what happens when your mouse leaves all 3 DIVs?

@graphic plus, here is a basic solution i have, but still works as expected, you may also need to improve the code to suite what you need it for.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
<head>
<title>Three divs</title>

<style>

.divs {background:#fff;
width:150px;
padding:8px;
border:1px solid #ddd;
color:#333;
float:left;
margin:10px;
height:120px;
}
.green{color:green; cursor:pointer}
.red{color:red; cursor:pointer}
.pink{color:pink; cursor:pointer}

.green:hover > .bar{background:green;z-index:-1}
.red:hover > .bar{background:red;z-index:-1}
.pink:hover > .bar{background:pink;z-index:-1}

.bar{background:#555;
padding:5px;
height:160px;
position:absolute;
z-index:-10;
top:0;
left:0;
width:940px;
transition:0.5s;
}
</style>
</head>
<body>


<div class="divs green">
<div class="bar"></div>
<h1>Green Div</h1>
</div>

<div class="divs red">
<div class="bar"></div>
<h1>Red Div</h1>
</div>

<div class="divs pink">
<div class="bar"></div>
<h1>Pink Div</h1>
</div>
<div style="clear:both"></div>


</body>

</html>

Btw OP,

granted I side with you on the fact that javascript may be turned off on some devices, I bet you that number is gradually shrinking. Many of today's popular apps require javascript to run.

Secondly, and perhaps most importantly, when it comes to efficiency, especially on mobile devices in countries like Nigeria where bandwidth is at a premium, comparing the amount of code in CSS vs JS is enough reason to take the risk (if you wanna call it that) to write it in Javascript.

You don't even need jQuery for instance (which adds 55K worth of code and isn't necessary, if this is all you want to do). 3 or 4 lines of regular javascript should do the trick.

@Yinksey thanks....just learn something

@adewasco u're welcum.

@Yawa, yes js is becoming cannot-do-without. There are some web applications and websites like codepen, stackoverflow and facebook that cannot run properly without js. Most browsers hav js enabled by default.

@Yink, you really tried. There are indeed several way to kill a rat. I like you approach. I know this is a demo, but try to be grouping ur common styles. Like, u wrote: cursor:pointer into three.

BTW, u spoke as if u didnt know that i put this thing up just for fun. was not asking for help.

Ok. Check mine here: http://www.ctrlshiftstudios.com/demo

@graphicplus, thanks, am just trying to change to the new oocss style,will soon change totally very soon.

^^^ Oh yes, there's nothing wrong with having us scratch our heads every now and then. It's what keeps the brain alert and it's what keeps the board interesting.

Nice one. Hopefully more can come up like this in the nearest future.

@Graphicsplus i knew it was like a tutorial and not that you needed help nice one guys