homepage Welcome to WebmasterWorld Guest from 54.196.62.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Change div2 on div1 hover
Wayder

10+ Year Member



 
Msg#: 4548521 posted 3:33 am on Feb 25, 2013 (gmt 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>

 

Wayder

10+ Year Member



 
Msg#: 4548521 posted 4:47 am on Feb 25, 2013 (gmt 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.....

matrix_jan



 
Msg#: 4548521 posted 7:11 am on Feb 25, 2013 (gmt 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.

lucy24

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



 
Msg#: 4548521 posted 8:23 am on Feb 25, 2013 (gmt 0)

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

10+ Year Member



 
Msg#: 4548521 posted 9:01 am on Feb 25, 2013 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved