嗨,我正在尝试动画的width
的跨度在这个链接的a。
null
.lang {
background-color: rgba(255,255,255,0.1);
left: -130px;
top: 400px;
}
.lang a {
padding: 10px;
color: black;
transition: width 1s ease-in-out;
}
.lang a:hover {
width: 300px;
}
<div id="left">
<a href="" class="position-fixed three_dweb"><img src="https://via.placeholder.com/150"></a>
<div class="position-fixed lang">
<a href="" class="farsi">Language Persian FA</a><br>
<a class="english">Language English EN</a><br>
<a class="search"><i class="fas fa-search"></i> Advanced Search </a>
</div>
</div>
null
你不能用宽度来翻译,你可以用max-width来翻译,但是你必须在没有悬停状态的a上指定你的max-width,例如:
null
.lang {
background-color: rgba(255,255,255,0.1);
left: -130px;
top: 400px;
}
.lang a {
padding: 10px;
color: black;
max-width: 0;
display: block;
overflow: hidden;
white-space: nowrap;
transition: max-width 1s ease-in-out;
}
.lang a:hover {
width: 300px;
max-width: 300px;
}
<div id="left">
<a href="" class="position-fixed three_dweb"><img src="https://via.placeholder.com/150"></a>
<div class="position-fixed lang">
<a href="" class="farsi">Language Persian FA</a>
<a class="english">Language English EN</a>
<a class="search"><i class="fas fa-search"></i> Advanced Search </a>
</div>
</div>