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

【问题标题】：change appearance of a child div when another child div is hovered over当另一个子 div 悬停在上方时更改子 div 的外观
【发布时间】：2017-12-29 06:00:31
【问题描述】：

我不确定不使用 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>

【问题讨论】：

使用General sibling combinator
试一试 - 没用。与悬停选择器一起使用时，兄弟组合器可能不起作用？代码在原始帖子中更新。如果我遗漏了什么，请告诉我。

标签： html css css-selectors hover children

【解决方案1】：

设法解决了。

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

观察

• 仅当我想要显示/隐藏的信息不在另一个子 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-->

【讨论】：