gpt4 book ai didi

html - 如何使用 元素悬停容器 div

转载 作者:行者123 更新时间:2023-11-27 23:14:12 25 4
gpt4 key购买 nike

我想我正在尝试做一个非常简单的效果。我有一个包含 4 个图标的菜单,我希望说明在悬停时向右滑动。我不确定我是否能够使用 CSS 执行此操作,因为 div 在第一个 div 的结束标记之后,我尝试了 + 但没有任何反应。

display:flex 有问题吗?我得说我不习惯使用它。

我的代码在这里,我降低了 #mainicons i 的不透明度,这样您就可以看到正在发生的事情,但它应该是 1。

#mainicons {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
}

#mainicons i {
opacity: 0.5;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 40;
height: 40px;
width: 50px;
padding: 10px;
color: white;
background: black;
text-align: center;
font-size: 15px;
line-height: 40px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

#mainicons i:hover {
border: 1.5px solid black;
color: black;
background: white;
}

#icondesc {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
}

#icondesc i {
display: flex;
flex-direction: column;
justify-content: space-between;
top: 50%;
margin: 80;
color: black;
background: white;
width: 70px;
height: 50px;
line-height: 40px;
padding-left: 0px;
font-size: 15px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}

#mainicons i:hover+#icondesc i {
margin-left: 50px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div id="icondesc">
<i>Home</i>
<i>Ask</i>
<i>Request</i>
<i>Archive</i>
</div>
<div id="mainicons">
<a href="/"><i class="fa fa-home"></i></a>
<a href="/ask"><i class="fa fa-envelope"></i></a>
<a href="/submit"><i class="fa fa-pencil "></i></a>
<a href="/archive"><i class="fa fa-clock-o"></i></a>
</div>

感谢您的回复!

最佳答案

问题与 flex 无关。您正在尝试根据 DOM 中稍后出现的元素的悬停来定位元素。这基本上是尝试创建一个 previous sibling selector ,这在 CSS 中是不可能的。

我会将文字说明与图标放在同一个容器中,并使用绝对定位来实现过渡效果。这是一个粗略的草图:

#mainicons {
position: fixed;
top: 250px;
left: 0px;
text-align: center;
display: flex;
flex-direction: column;
}

#mainicons>a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

#mainicons i {
opacity: 1;
height: 40px;
width: 50px;
padding: 10px;
color: white;
background: black;
text-align: center;
font-size: 15px;
line-height: 40px;
transition: all .5s ease;
}

#mainicons i:hover {
border: 1.5px solid black;
color: black;
background: white;
}

#mainicons span {
color: black;
background: white;
width: 70px;
font-size: 15px;
transition: all .5s ease;
position: absolute;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
left: -100px;
opacity: 0;
}

#mainicons a:hover>span {
opacity: 1;
left: 70px;
transition: .5s;
border: 1px solid black;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="mainicons">
<a href="/"><i class="fa fa-home"></i><span>Home</span></a>
<a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
<a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
<a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
</div>

https://jsfiddle.net/qeoyyryp/1/

关于html - 如何使用 <i> 元素悬停容器 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44119902/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com