當另一個子div懸停在子div上時，更改子div的外觀
[英]change appearance of a child div when another child div is hovered over
問題描述
我不確定如果不使用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>
1 個解決方案
解決方案1
1 2017-12-29 08:25:58
設法解決。
它不是最干凈的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-->
CSS 在另一個 div 懸停時更改單獨 div 的背景顏色
[英]CSS change background color of seperate div when another div is hovered
特定子div從另一個子div的JavaScript更改樣式
[英]JavaScript change style of a specific child div from another child div
添加“溢出：滾動”后，如果不再將鼠標懸停在子div上，應顯示的隱藏div不再顯示
[英]after adding an “overflow: Scroll” the hidden div that should show if hovered over an child div does not appear anymore
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.