提问者:小点点

如何插入css3变换宽度悬停不工作? [副本]


嗨,我正在尝试动画的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


共1个答案

匿名用户

你不能用宽度来翻译,你可以用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>