Welcome to WebmasterWorld Guest from 54.234.153.186

Forum Moderators: not2easy

Message Too Old, No Replies

Change div2 on div1 hover

     

Wayder

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>

Wayder

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.....

matrix_jan

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.

lucy24

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.

Wayder

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