Question

我目前在HTML中有3个h1徽标，具有不同的类

    <h1 class="logo"><span>Rec</span></h1>
    <h1 class="logo2">X</h1>
    <h1 class="logo3">change</h1>

当我将鼠标悬停在logo2上方时，我希望能够将logo和logo3推出方式...目前，我能够将logo3（向右）推开...但是我无法访问以前的徽标来将其推开（我想向左推）。

  .logo2:hover ~ .logo3{
    transition: all ease-in-out 500ms;
    padding-left: 0.3em;
  }

如何访问第一个徽标。我不希望logo2仅移动徽标和logo3。

Answer 1

一些flexbox技巧可以满足您的需求。 ;）。

如果您是Flexbox的新手，我建议this guide。

摘要

.container {
  display: flex;
  justify-content: center;
}

.logo2 {
  text-align: center;
}

.logo2:hover {
  flex: 1;
  transition: all ease-in-out 500ms;
}

<div class="container">
  <h1 class="logo logo1"><span>Rec</span></h1>
  <h1 class="logo logo2">X</h1>
  <h1 class="logo logo3">change</h1>
</div>

搁置内容

1 个答案:

摘要