Wayder
msg:4548531 | 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:4548553 | 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
msg:4548556 | 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
msg:4548563 | 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.
|
|
