Welcome to WebmasterWorld Guest from 107.22.87.145

Forum Moderators: not2easy

Message Too Old, No Replies

Change div2 on div1 hover

     
3:33 am on Feb 25, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2004
posts: 82
votes: 0


Is it possible for me to change (move) the image in div2 when hover over div1? Any help proffered would be appreciated.


#div1{
border:2px solid #999;
margin:1em 0;
min-height:102px;
padding:.25em;
border-radius:7px;
}
#div2{
width:150px;
height:100px;
float:right;
background:url('/images/small.png') no-repeat 0 0;
}
#div2:hover{
background:url('/images/small.png') no-repeat -150px 0;
}


<div id="div1">
<div id="div2"></div>
<p>Descriptive text</p>
</div>
4:47 am on Feb 25, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2004
posts: 82
votes: 0


Darn it, I spent ages trying to figure this out. I post, go for a drink, come back and 10 minutes later....



#div1{
border:2px solid #999;
margin:1em 0;
min-height:102px;
padding:.25em;
border-radius:7px;
}
#div2{
width:150px;
height:100px;
float:right;
background:url('/images/small.png') no-repeat 0 0;
}
#div1:hover #div2{
background:url('/images/small.png') no-repeat -150px 0;
}

<div id="div1">
<div id="div2"></div>
<p>Descriptive text</p>
</div>


Of course, if you have improvements.....
7:11 am on Feb 25, 2013 (gmt 0)

Preferred Member

5+ Year Member

joined:Mar 27, 2010
posts:423
votes: 0


Yes, if div2 is a child of div1 then go with your solution. If they are distant cousins, go with onmouseover="document.getElementById('id')..." and back again with onmouseout.
8:23 am on Feb 25, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13210
votes: 347


Is div1 also physically bigger than div2? This

<div id="div1">
<div id="div2"></div>
<p>Descriptive text</p>
</div>


implies that it is.

I ask because I've got a nasty feeling the hover: business might annoy and/or confuse the user, depending on exactly what you're changing.

Is div2 above or below div1? I mean of course in the z dimension, not vertically on the monitor ;) Will a hover in the area covered by div2-- the inner div-- be recognized as a hover over div1 --the outer div? The answer might be either Yes or No. The important thing is to make sure that the result agrees with your intention ... in all current browsers.
9:01 am on Feb 25, 2013 (gmt 0)

Junior Member

10+ Year Member

joined:May 2, 2004
posts: 82
votes: 0


div1 isnt that much bigger than div2. I change the background colour of div1 and the image to show that it can be clicked. It works in every browser that I could get my hands on, apart from ie6 that is and as I have already abandoned IE6 I'm not going to lose sleep over it.

Thanks.