当另一个子div悬停在子div上时，更改子div的外观
[英]change appearance of a child div when another child div is hovered over
问题描述
Im not sure if this is possible without using JS. 
我不确定如果不使用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 https://i.stack.imgur.com/CsB1A.png
I believe the way to do this is to put each image into a seperate child div. 我相信这样做的方法是将每个图像放入一个单独的子div中。 Then on rollover of one of these child divs, have another information div change from "display:none" to "display:block". 然后在这些子div之一的翻转时，将另一个信息div从“ display：none”更改为“ display：block”。
The question is how do I make the hover selector on one child div affect a different child div? 问题是如何使一个子div上的悬停选择器影响另一个子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 个解决方案
解决方案1
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. 它不是最干净的CSS，具有许多重复相同属性的类。
Observations 意见
• General sibling combinator only worked provided the information that I wanted to display/hide was NOT in another child-div. •通用同级组合器仅在我要显示/隐藏的信息不在另一个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 •使用分隔符div（宽度：100％）将顶部的子项与悬停显示的信息分开•使用<span>包含信息而不是div
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-->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.