如何在 css3 中使用过渡时停止背景移动

Question

.model__right {
    display: flex;
    flex-direction: column;
    font-size: 1.6rem;
    font-family: Calibre-Medium,sans-serif;
    cursor:pointer;
    
}    
.model__home,.model__project,.model__contact {
        letter-spacing: -1px;
        transition: letter-spacing 2s linear;
    }

.model__home:hover{
    letter-spacing: 3px;
}

1. 在使用上面的代码时，将鼠标悬停在一个链接上，前 2 个链接移动到左侧，
2. 我希望所有链接都在 static 中，并且只有一个链接我 hover 希望它移动到右侧

3）model_right 是我的父元素，属于模型的右侧（导航元素）

Answer 1

问题可能是您的 hover 选择器使用.model__home元素。 您可能只想使用您的:hover css select 单个列表项，如下所示：

 .model_home { letter-spacing: -1px; transition: letter-spacing 2s linear; }.model_home_item:hover { letter-spacing: 3px; }

 <div class="model_home"> <ul> <li class="model_home_item">item 1</li> <li class="model_home_item">item 2</li> <li class="model_home_item">item 3</li> <li class="model_home_item">item 4</li> </ul> </div>

如果这不能回答您的问题，您能否提供更多详细信息？ 我不确定您所说的“我 hover 希望它移动到右侧的一个链接”是什么意思。 如果您试图将文本移动到 hover 的右侧，您可能需要更多类似这样的内容：

 .model_home { letter-spacing: -1px; transition: letter-spacing 2s linear; }.model_home_item:hover { text-align: right; }

 <div class="model_home"> <ul> <li class="model_home_item">item 1</li> <li class="model_home_item">item 2</li> <li class="model_home_item">item 3</li> <li class="model_home_item">item 4</li> </ul> </div>

Answer 2

我向我的父元素添加了 width 属性，这限制了从我的盒子中移出

.model__right {
    display: flex;
    width:200px;
    flex-direction: column;
    font-size: 1.6rem;
    font-family: Calibre-Medium,sans-serif;
    cursor:pointer;
    
}