Welcome to WebmasterWorld Guest from 54.226.110.143

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:13218
votes: 348


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members