如何在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. 我希望所有链接都是静态的，只有一个我悬停的链接希望它移动到右侧

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

Answer 1

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

.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>

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

.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;
    
}