Welcome to WebmasterWorld Guest from 54.198.69.193

Forum Moderators: not2easy

Message Too Old, No Replies

Change div2 on div1 hover

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

10+ Year Member



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)

10+ Year Member



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)

5+ Year Member



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)

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



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)

10+ Year Member



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month