javascript - 悬停时可以将元素带到另一个兄弟元素吗?[CSS动画]
问题描述
当元素悬停时,我想让元素移动到另一个元素。这些元素是兄弟,因为我希望一个覆盖另一个。
下面的 HTML 和 CSS 给了我不错的结果。但我不想为“width”和“left”使用常量值来为它们设置动画。有没有办法在不使用恒定位置值的情况下将移动元素放置在悬停元素上?
nav .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
nav .start-home,
a:nth-child(1):hover~.animation {
width: 105px;
left: 0;
background-color: #1abc9c;
}
nav .start-blog,
a:nth-child(2):hover~.animation {
width: 105px;
left: 105px;
background-color: #e74c3c;
}
nav .start-projects,
a:nth-child(3):hover~.animation {
width: 135px;
left: 210px;
background-color: #3498db;
}
nav .start-about,
a:nth-child(4):hover~.animation {
width: 115px;
left: 345px;
background-color: #9b59b6;
}
nav .start-contact,
a:nth-child(5):hover~.animation {
width: 130px;
left: 460px;
background-color: #e67e22;
}
nav {
margin: 27px auto 0;
position: relative;
display: table;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
white-space: nowrap;
}
nav a {
line-height: 50px;
padding: 2px 30px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
<nav>
<a href="#">Home</a>
<a href="#">Blog</a>
<a href="#">Projects</a>
<a href="#">About</a>
<a href="#">Contact</a>
<div class="animation start-home"></div>
</nav>
解决方案
我找不到仅使用 CSS 的方法,所以我使用了 JavaScript 并修改了元素的样式。这是我不想做的事情。如果您只知道如何使用 CSS,请告诉我。
推荐阅读
- couchdb - 使用 $or 运算符的 Cloudant Query 会发出警告 - “找不到匹配的索引,创建索引以优化查询时间”虽然存在索引?
- tableau-api - 我怎样才能对那些在画面上有一些价值的变量求和?
- java - 通过rest高级客户端在弹性搜索中创建索引内的类型
- java - -bash: import: command not found : command not found Java Compilation Mac Terminal
- swt - Eclipse SWT Shell:getBounds() 似乎返回错误坐标
- python - 依次从多个字符串中获取字符
- swift - 如何在 UITableView Cell 中为 ImageView 添加大小和位置?
- python - 问:如何使用 Python 在 Web 内容中动态创建 iframe?
- cuda - 将 CUDA-gdb 与 NVRTC 一起使用
- java - NetBeans 部署错误:不支持启动服务器 GlassFish Server