如何在 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;
}

将鼠标悬停在一个 link 上时使用上述代码时，前 2 个 link 正在向左侧移动，
我希望所有 link 都处于静态状态，只有一个 link 我悬停在上面希望它移动到右侧

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

Answer 1

问题可能是您的悬停 select 或使用了 .model__home 元素。您可能只想 select 使用 :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>

如果这不能回答您的问题，您能否提供更多详细信息？我不确定您所说的“我悬停的一个 link 希望它移动到右侧”是什么意思。如果你想让文本在悬停时移动到右侧，你可能需要更像这样的东西：

.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

我为父元素添加了宽度属性限制移出我的盒子

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

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

How to stop background from moving while using transition in css3

html

css

css-transitions