Question

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

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

参见示例

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

我认为这样做的方法是将每个图像放入一个单独的子div中。然后在翻转其中一个子div时，从＆＃34; display：none＆＃34;中取出另一个信息div。到＆＃34;显示：块＆＃34;。

问题是如何让一个子div上的悬停选择器影响另一个子div？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

管理好解决。

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

<强>观察

•只有我想显示/隐藏的信息不在另一个child-div中时，一般兄弟组合器才能工作。 •使用分隔符div（宽度：100％）将顶级子项与hover上显示的信息分开 •使用<span>包含信息而不是divs

我知道，这看起来并不那么闪光，但我会在我的网站上创建一个包含图像的部分，并将其链接到此处。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: