[英]Hover father div > show child div. OnMouseOut > hide child div after X seconds
[英]Show/hide a div child on hover without javascript
我有一堆重复卡:
<div id="container">
<div class="card">
<div class="card_img"><img src="/img.jpg"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
...
<div class="card">
<div class="card_img"><img src="/img.jgp"></div>
<div class="card_text">Title</div>
<div class="card_moreinfo">More info</div>
</div>
</div>
容器样式类似于:
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
卡片样式类似于:
.card {
flex: 0 0 13em;
}
我的目标是获得更多信息文本(div),当我使用 hover 卡时出现; 由于卡片包含来自数据库的产品,我当然可以在卡片和更多信息中将产品 ID 添加为 class,并以 javascript 的名称作为目标,但我想知道我是否可以更改 div 的显示,将其定位为div 的孩子我在盘旋
.card_moreinfo {
display: none;
}
.card_moreinfo:hover + card_moreinfo{
display: block;
}
您需要使用:hover 来显示或隐藏孩子。 例子;
.card_moreinfo{
display: none;
}
.card:hover .card_moreinfo{
display:block;
}
.card {
flex: 0 0 13em;
}
.card:hover {
/*add your css*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.