PDA

View Full Version : how to change the background image of a particular div when hover another div



hareeem
Mar 8th, 2015, 04:02 PM
how to change the background image of a particular div when hover another div
give me an example

coothead
Mar 8th, 2015, 04:48 PM
Hi there hareeem,


here is a basic example with which to experiment...


<!DOCTYPE html>
<html lang="en">
<head>
<base href="http://coothead.co.uk/images/">
<meta charset="utf-8">

<title>untitled document</title>

<style media="screen">
#preload {
background-image:url(buddha.jpg);
}
body {
background-color:#f0f0f0;
}
#box1 {
width:322px;
height:198px;
margin:10px auto;
border:1px solid #f00;
border-radius:50%;
background-color:#c00;
box-shadow:inset 0 0 20px #300,5px 5px 10px #999;
cursor:pointer;
}
#box1:hover {
border-color:#ff0;
background-color:#cc0;
box-shadow:inset 0 0 20px #330,5px 5px 10px #999;
}
#box1:hover ~ #box2 {
border-color:#ff0;
background-image:url(buddha.jpg);/* preloaded for smoothness */
box-shadow:inset 0 0 20px #330,5px 5px 10px #999;
}
#box2 {
width:484px;
height:298px;
margin:10px auto;
border:1px solid #f00;
border-radius:50%;
background-image:url(blood.jpg);
background-size:100% 100%;
box-shadow:inset 0 0 20px #300,5px 5px 10px #999;
}
</style>

</head>
<body>

<div id="box1"></div>
<div id="box2"></div>

<div id="preload"></div>

</body>
</html>


coothead

sunfighter
Mar 9th, 2015, 03:45 PM
@coothead I have not seen the ~ used before. Where can I get more information on it. Google failed me on this.

BTW I love your landing page.

coothead
Mar 9th, 2015, 04:19 PM
Hi there sunfighter,


the "tilde selector - (~)" is very useful. ;)

Read up on it here...


CSS/Selectors/combinators/general - W3C Wiki (http://www.w3.org/wiki/CSS/Selectors/combinators/general)


BTW I love your landing page.

A little bit of Shakespeare often gives a great deal of pleasure. :D


coothead

sunfighter
Mar 9th, 2015, 04:37 PM
The magic word "combinator'. Don't know how I'll remember that. Thank you kind sir.