如何实现这一点时，我悬停一个灵活的项目？
如何实现这一点时，我悬停一个灵活的项目？
提问于 2020-06-01 10:24:18
我搜索了所有的堆栈溢出，但我找不到任何线索，我在这里被击中。在一定程度上，我在代码中使用了flex容器和子项，但我无法超越它。问题是，当我们悬停一个子项时，需要创建一个新的子项，如预期结果所示。如果我们需要使用伪元素或任何其他的flex属性来实现这一点。提前谢谢。
我的代码：
https://jsfiddle.net/k2qr398u/1/
我的结果
预期结果：
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
/* position: relative; */
}
.col p {
font-size: 16px;
font-weight: bold;
}
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}<!--**HTML**-->
<body>
<div class="container">
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
<div class="col col-2">
<p class="my-name">Sri</p>
</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</body>
对不起，如果这个问题听起来很傻或者很傻的话，我是一个初学者，尝试学习网页开发技巧。
Stack Overflow用户
回答已采纳
发布于 2020-06-01 12:21:27
我创造了一些与你预期的结果相似的东西。请运行结果的代码片段。
更新:包括悬停过渡。
/**CSS**/
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: #400017;
}
.img-css {
width: 50px;
height: 50px;
}
.main-heading {
display: block;
text-align: center;
color: #fc065d;
margin-bottom: 70px;
}
.img-js {
width: 50px;
height: 50px;
}
.container {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
border: 3px solid #360310;
max-width: 610px;
height: 310px;
text-align: center;
margin: 0 auto;
flex-direction: row;
/* transform: translate(-50%,-50%); */
}
.col {
width: 130px;
height: 100px;
margin: 0 auto;
border: 3px solid #5e0a1f;
padding-top: 44px;
padding-left: 26px;
padding-right: 26px;
color: #fff;
background-color: #010001;
border-radius: 30px;
z-index: 20;
position: relative;
}
.col p {
font-size: 16px;
font-weight: bold;
}
/*
.col-2 p {
position: relative;
top: 55px;
text-align: center;
font-weight: bold;
}
*/
.col-1,
.col-2-1,
.col-2-2,
.col-3 {
position: absolute;
left: 0;
top: 0;
transition: 1s;
}
.wrapper {
position: relative;
}
.wrapper:hover .col-1 {
transition: 1s;
left: -200px;
}
.wrapper:hover .col-2-1 {
transition: 1s;
top: -170px;
}
.wrapper:hover .col-2-2 {
transition: 1s;
top: 170px;
}
.wrapper:hover .col-3 {
transition: 1s;
left: 200px;
}<!--**HTML**-->
<body>
<div class="container">
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-1">
<img src="images/css.svg" alt="CSS logo" class="img-css">
<br>
<p>I am</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-2-1">
<p class="my-name">Sri</p>
</div>
<div class="col col-2-2">
<p class="my-name">Pratham</p>
</div>
</div>
<div class="wrapper">
<div class="col"> Underneath</div>
<div class="col col-3">
<img src="images/javascript.svg" alt="JS logo" class="img-js">
<p>Developer
</p>
</div>
</div>
</div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62130089
复制相关文章
相似问题
腾讯云开发者
