悬停时,我想翻译图标,但CSS
对其无效。
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
}
#humberger div {
position: absolute;
left: 0;
height: 4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
top: 0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom: 0;
}
#humberger:hover {
div:nth-of-type(1) {
transform: rotate(20deg);
}
div:nth-of-type(2) {
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
div:nth-of-type(3) {
transform: rotate(-20deg);
}
}
<div id="humberger">
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>
我希望翻译如下。
如果有人给我任何知识来解决这个问题,我会很高兴的。
答案 0 :(得分:0)
我认为您的CSS表示法无效。
改为尝试以下结构:
#humberger:hover > div:nth-of-type(1){
transform: rotate(20deg);
cursor: pointer;
}
(经测试有效)
答案 1 :(得分:0)
请尝试以下代码。
css
#humberger div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: 0.5s all ease 0s;
}
#humberger:hover div {
transition: 0.5s all ease 0s;
}
#humberger div:nth-of-type(1){
top:0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom:0;
}
#humberger:hover div:nth-of-type(1){
transform: rotate(45deg);
top: 10px;
}
#humberger:hover div:nth-of-type(2){
background: rgba(255, 255, 255, 0);
}
#humberger:hover div:nth-of-type(3){
transform: rotate(-45deg);
bottom: 10px;
}
答案 2 :(得分:0)
添加过渡时间和过渡起点并调整旋转度。
#humberger div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: .2s; /*Add transition time*/
transform-origin: 100% center; /*Add transform origin*/
}
#humberger:hover{
div:nth-of-type(1){
transform: rotate(-55deg); /*Adjust angle*/
}
div:nth-of-type(2){
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
div:nth-of-type(3){
transform: rotate(55deg); /*Adjust angle*/
}
}
答案 3 :(得分:0)
请遵循SASS结构。
这是您的结构的SASS代码:
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
div{
position: absolute;
left:0;
height:4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
transition: all 0.3s;
&:nth-of-type(1){
top:0;
}
&:nth-of-type(2) {
top: 10px;
}
&:nth-of-type(3) {
bottom:0;
}
}
&:hover{
div{
&:nth-of-type(1){
transform: rotate(45deg);
top: 0;
bottom: 0;
margin: auto;
}
&:nth-of-type(2){
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
&:nth-of-type(3){
transform: rotate(-45deg);
top: 0;
bottom: 0;
margin: auto;
}
}
}
}
这是普通CSS的代码段。
#humberger {
position: relative;
height: 24px;
width: 24px;
display: inline-block;
box-sizing: border-box;
}
#humberger div {
position: absolute;
left: 0;
height: 4px;
width: 24px;
background-color: #444;
border-radius: 2px;
box-sizing: border-box;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#humberger div:nth-of-type(1) {
top: 0;
}
#humberger div:nth-of-type(2) {
top: 10px;
}
#humberger div:nth-of-type(3) {
bottom: 0;
}
#humberger:hover div:nth-of-type(1) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
bottom: 0;
margin: auto;
}
#humberger:hover div:nth-of-type(2) {
-webkit-transform: translateX(100px);
transform: translateX(100px);
background: rgba(255, 255, 255, 0);
}
#humberger:hover div:nth-of-type(3) {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 0;
bottom: 0;
margin: auto;
}
<div id="humberger">
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
<div onclick='openNav()'></div>
</div>
<span class='icon-title'>Open</span>
上面的SASS代码的工作原理与代码段相同。
我希望这个答案对您有所帮助。
谢谢...