当另一个子div悬停在子div上时，更改子div的外观

Question

我不确定如果不使用JS是否可行。

基本上，我试图创建一种效果，将鼠标悬停在一行图像上，该图像点亮，有关此信息的信息显示在下面。 虽然图像翻转效果很简单，但是很难显示下面的描述。 我知道我可以以此为工具提示，但是所需的效果是出现在页面中。

看例子

https://i.stack.imgur.com/CsB1A.png

我相信这样做的方法是将每个图像放入一个单独的子div中。 然后在这些子div之一的翻转时，将另一个信息div从“ display：none”更改为“ display：block”。

问题是如何使一个子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>

Answer 1

设法解决。

它不是最干净的CSS，具有许多重复相同属性的类。

意见

•通用同级组合器仅在我要显示/隐藏的信息不在另一个child-div中的情况下起作用。 •使用分隔符div（宽度：100％）将顶部的子项与悬停显示的信息分开•使用<span>包含信息而不是div

我意识到，这看起来并不那么快，但是我将在网站上创建一个包含图像的部分，并将其链接到此处。

 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-->

当另一个子div悬停在子div上时，更改子div的外观

问题描述

1 个解决方案

解决方案1
1 2017-12-29 08:25:58

当另一个子div悬停在子div上时，更改子div的外观

问题描述

1 个解决方案

解决方案1 1 2017-12-29 08:25:58

解决方案1
1 2017-12-29 08:25:58