html - 如何使用:悬停动画另一个元素来定位一个元素
问题描述
试图hover
越过触发to 转换的图标,并且.
这是选择一个但影响另一个元素的正确方法吗?h4
margin
display
background
element:hover{}
.nav_item i:hover h4
请看下面的代码笔链接:
ps我用x和 o代替图标,字体真棒不会加载。
css
.nav_item h4 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
width: 40rem;
display: none;
}
.nav_item i {
width: 5rem;
}
.nav_item i:hover h4 {
background-color: #b4fdd2;
width: 20rem;
display: block;
}
HTML
<div class="nav_box">
<div class="nav_ul">
<div class="nav_item">
<span class="d"><i class="fas fa-home">O</i></span>
<h4 class="h4">Home</h4>
</div>
<div class="nav_item">
<span class="d"><i class="fas fa-barcode">X</i></span>
<h4 class="h4">Shop</h4>
</div>
<div class="nav_item">
<span class="d"><i class="fas fa-book">O</i></span>
<h4 class="h4">Learn</h4>
</div>
<div class="nav_item nav_down">
<span class="d"><i class="fas fa-key">X</i></span>
<h4 class="h4">Sign in</h4>
</div>
</div>
</div>
</nav>
解决方案
好吧,既然你包装了你的 h4 文本和字体,你可以使用 span:hover 而不是 i hover。
请注意,如果您使用“+”,它将仅适用于 span 旁边的第一个 H4 标签。如果您使用“~”,它将适用于 span 旁边的每个 H4 标签。在此处查看示例https://jsfiddle.net/dkn6zch1/3/
<script src="https://kit.fontawesome.com/38d66fee78.js" crossorigin="anonymous"></script>
@import url("https://fonts.googleapis.com/css?family=Spartan&display=swap");
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 62.5%;
height: 100vh;
}
body {
font-family: "Spartan";
}
a {
text-decoration: none;
}
.nav {
font-size: 4rem;
background-color: lavender;
height: 100vh;
display: inline-block;
}
.nav_logo {
width: 100%;
height: 5rem;
}
.nav_box {
display: inline-block;
height: 95vh;
}
.nav_ul {
display: inherit;
height: auto;
}
.nav_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.nav_item:not(:last-child) {
margin-top: 2rem;
}
.nav_item h4 {
-webkit-transition: all 1s ease;
transition: all 1s ease;
width: 40rem;
display: none;
}
.nav_item i {
width: 5rem;
}
.nav_item span:hover ~ h4 {
background-color: #b4fdd2;
width: 20rem;
display: block;
}
.nav_item i,
.nav_item h4 {
text-align: center;
}
.nav_down {
//margin-top: 64vh;
}
/*# sourceMappingURL=style.css.map */
<nav class="nav">
<div class="nav_logo"></div>
<div class="nav_box">
<div class="nav_ul">
<div class="nav_item">
<span class="d"><i class="fas fa-home">O</i></span>
<h4 class="h4">Home</h4>
</div>
<div class="nav_item">
<span class="d"><i class="fas fa-barcode">X</i></span>
<h4 class="h4">Shop</h4>
</div>
<div class="nav_item">
<span class="d"><i class="fas fa-book">O</i></span>
<h4 class="h4">Learn</h4>
</div>
<div class="nav_item nav_down">
<span class="d"><i class="fas fa-key">X</i></span>
<h4 class="h4">Sign in</h4>
</div>
</div>
</div>
</nav>
推荐阅读
- sql - 在 MS Access 查询中使用用户自定义函数来传递用户变量值
- javascript - Twig - 根据日期显示/隐藏元素
- ios - SystemConfiguration.CaptiveNetwork 在 iOS 12 上不起作用
- types - 如何将生成器存储在结构中?
- database - database.com force.com 和 salesforce.com
- hive - 如何在 Hive 查询中使用 row_number 来获取最新的用户登录?
- ios - 删除单元格时索引超出范围
- javascript - javascript中的.length是否遍历整个数组?
- android - SQLite,DisplayListCanvas 在未绑定的 RenderNode 上启动(没有 mOwningView)
- c# - 在 Xamarin.Forms 中检索 ListView 选定项值