代码之家 › 专栏 › 技术社区 › four-eyes

在DIV转换时固定子级位置

css3 css javascript

four-eyes · 技术社区 · 7 年前

我的设置如下

<div class=wrapper>
  <div class=element />
</div>

标记

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
}

https://codepen.io/anon/pen/eLzGXY

现在,当我点击 Icon , the 偶像 移动到 wrapper ,当它转换时。我要它保持在左边,在它原来的位置。我该怎么做?

3 回复 | 直到 7 年前

Kaushik Andani 7 年前

当鼠标悬停时,可以使用set css属性来实现。

请参见下面的示例。

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
    justify-content: left;
    padding-left:35px;
}

<div class=wrapper>
  <div class=element>
  </div>
</div>

semuzaboi 7 年前

我知道有多种方法可以解决这个问题- 如果您不反对使用定位-您可以设置 element 绝对的地位和一些下流的 left 你可以实现你想要的。

.element {
  background-color: hotpink;
  width: 10px;
  position:absolute;
  left:37px;
  height: 10px;
}

https://codepen.io/anon/pen/OoXOPo#anon-login

或者我们可以使用 relative 与一些 justify-items:start 在父容器上放置 要素 总是在它的位置上

https://codepen.io/anon/pen/eLzeZp

Moose 7 年前

要使Square类元素保持在左侧,请删除:

    .wrapper {
       justify-content:center;
    }

然后对元素进行这样的边距:

    .element {
        margin-left:35px;
    }

https://codepen.io/FEARtheMoose/pen/mGEqVL

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

8 月前

Alex · 在轻量级中同时解构和不解构变量

8 月前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

8 月前

bairog · 从按属性筛选的对象数组字典中创建值数组

8 月前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

8 月前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

user3472810 · Angular@Output/EventEmitter返回undefined

8 月前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

8 月前