当另一个子div悬停时，更改子div的外观
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当另一个子div悬停时，更改子div的外观相关的知识，希望对你有一定的参考价值。
我不确定如果不使用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>答案
管理工作。
它不是最干净的CSS，有很多类重复相同的属性。
意见
•只有我想要显示/隐藏的信息不在另一个child-div中时，一般兄弟组合器才能工作。 •使用分隔符div（宽度：100％）将顶级子项与hover上显示的信息分开•使用<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 并关闭其他子 div（使用 Javascript）
使用绝对定位（不重复）在悬停另一个 div 时更改 div 的外观