change appearance of a child div when another child div is hovered over
Question
Im not sure if this is possible without using JS.
Basically Im trying to create an effect where you mouseover an image in a row and this image lights up and information about this is image displayed below. While image rollover effect is straightforward, displaying the description underneath is hard to achieve. I know I could do this as a tooltip, but the desired affect is to appear in page.
See example
https://i.stack.imgur.com/CsB1A.png
I believe the way to do this is to put each image into a seperate child div. Then on rollover of one of these child divs, have another information div change from "display:none" to "display:block".
The question is how do I make the hover selector on one child div affect a different child div?
html, page { margin: 0px; padding: 0px; width: 100%; font-family: sans-serif; } .parent { border: 1px solid fuchsia; padding: 1%; height: 360px; width: 60%; min-width: 600px; max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .child { display: block; background: white; height: 120px; width: 120px; border: 2px solid purple; border-radius: 80px; text-align: center; line-height: 120px; } .child:hover { background: cyan; border: 2px solid cyan; } .p1 { display: none; } .p2 { display: none; } .p3 { display: none; } .p4 { display: none; } .1:hover ~ .p1{ display: block; } .2:hover ~ .p2{ display: block; } .3:hover ~ .p3{ display: block; } .4:hover ~ .p4{ display: block; } .childinfo { width: 100%; height: 200px; border: 2px solid cyan; margin-bottom: 0px; padding: 1%; text-align: center; }
<html> <body> <div class="parent"> <div class="child 1">Child1</div> <div class="child 2">Child2</div> <div class="child 3">Child3</div> <div class="child 4">Child4</div> <div class="childinfo"> <br><strong>Child Info Div</strong> <span class="p1">This is info about child 1 div</span> <span class="p2">This is info about child 2 div</span> <span class="p3">This is info about child 3 div</span> <span class="p4">This is info about child 4 div</span> </div> </div> </body> </html>
1 answers
solution1
1 2017-12-29 08:25:58
Managed to work it out.
Its not the cleanest CSS, with a lot of classes duplicating the same properties.
Observations
• General sibling combinator only worked provided the information that I wanted to display/hide was NOT in another child-div. • Used a separator div (width: 100%) to separate the top children from the information shown on hover instead • Used <span> to contain the information instead of divs
I realise, this doesn't look so flash but I'll be creating a section on my site with imagery and will link it here.
body, html { padding: 0px; margin: 0px; font-family: sans-serif; } span { margin: 0 auto; } .parent { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; width: 80%; min-width: 816px; height: 300px; border: 2px solid fuchsia; text-align: center; } .divider { width: 100%; height: 8px !important; border: #cccccc; } .child1 { width: 200px; height: 200px; border: 2px solid purple; display: inline-block; border-radius: 120px; text-align: center; line-height: 200px; } .child1:hover { background: cyan; border: 2px solid cyan; } .child1:hover ~ span.p1 { display: block; } .child2 { width: 200px; height: 200px; border: 2px solid purple; display: inline-block; border-radius: 120px; text-align: center; line-height: 200px; } .child2:hover { background: cyan; border: 2px solid cyan; } .child2:hover ~ span.p2 { display: block; } .child3 { width: 200px; height: 200px; border: 2px solid purple; display: inline-block; border-radius: 120px; text-align: center; line-height: 200px; } .child3:hover { background: cyan; border: 2px solid cyan; } .child3:hover ~ span.p3 { display: block; } .child4 { width: 200px; height: 200px; border: 2px solid purple; display: inline-block; border-radius: 120px; text-align: center; line-height: 200px; } .child4:hover { background: cyan; border: 2px solid cyan; } .child4:hover ~ span.p4 { display: block; } span { display: none; }
<div class="parent"> <div class="child1">child 1</div> <div class="child2">child 2</div> <div class="child3">child 3</div> <div class="child4">child 4</div> <div class="divider"></div> <!--/invisible divider ensures information and descriptions go to next line in the flex box--> <span class="p1">Here is info about child 1</span> <span class="p2">Here is info about child 2</span> <span class="p3">Here is info about child 3</span> <span class="p4">Here is info about child 4</span> </div><!--/ parent div-->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.