Help - Search - Members - Calendar
Full Version: CSS: image hover
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
pinkbmx
Say I have div A, div B and div C.

I put a picture in div A - and when hover on that picture, text on div B will appear. However, i also want div C to display none when hover that pix in div A.

If you still copy me at this point, is it possible to make div C display NONE when hover that pix??

pinkbmx
the code for div a and b so far is something like this.

QUOTE
<style>

div.AAA {background-color:red;
position:absolute;
top:25px;
left:110px;
width:100px;
height:150px;}

div.BBB { display:none;
background-color:#ffffcc;
position:relative; top:25px; left:200px;
width:140px;
font-size:smaller;
text-align:center;
padding:5px;
margin:0 10px;
border: 1px solid black; }

div.AAA:hover + div.BBB {display:block; }

</style>
speakerboxx123
wow! what a headache, but where is div C in the code?
digitalfragrance
Theoretically, you can place DIV B underneath the picture, and when you hover, you can make the opacity of that picture 0% and thus see DIV B underneath. Not quite sure how to accomplish what you want with DIV C.

How does that sound? Still a headache of coding, but it works.
pinkbmx
hmm div C is right under div B ... and they both are text, not picture.

I've been doing some research and i believe what i want is not possible or if possible, not proper with CSS, i need JS... or so.

Thank you both of you anyway :)

digitalfragrance
You can accomplish half of what you want, but not all of it - it's basically choosing between DIV B or DIV C. We can help you code :)
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.