代码之家 › 专栏 › 技术社区 › Jack

如何仅使容器移动?

slide css html javascript

Jack · 技术社区 · 3 年前

我试图使唯一的容器成为它要移动的内容,但它的移动也是它的父容器,它包含背景,这应该是固定的(就像整个父div一样)。我该怎么解决?

我的代码:

#container {
  font-size: 20px;
  font-family: Arial;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  transition: .2s;
  margin-top: 10px;
  transition: margin 1s;
}

#container:hover{
  margin-top: -3500px;
  transition: margin 55s linear;
}

  <div style="background-color: rgb(162, 0, 255); height: 400px;">
    <div id="container">
        <a href="'#">link1</a> some text...<br><br>
        <a href="'#">link2</a> some more text 2....<br><br>
        <a href="'#">link3</a> some text 3....<br><br>
        <a href="'#">link4</a> some text 3....<br><br>
        <a href="'#">link5</a> some text 3....<br><br>
        <a href="'#">link6</a> some text 3....<br><br>
        <a href="'#">link7</a> some text 3....<br><br>
        <a href="'#">link8</a> some text 3....<br><br>
    </div>
</div>

1 回复 | 直到 3 年前

Sli4o 3 年前

如果为上面的div分配一个id,并将悬停事件分配给它工作的元素。

#container {
  position: fixed;
  font-size: 20px;
  font-family: Arial;
  -webkit-background-clip: text;
  text-fill-color: transparent;
  transition: .2s;
  margin-top: 10px;
  transition: margin 1s;
}

#box:hover #container{
  margin-top: -3500px;
  transition: margin 55s linear;
}

<div style="background-color: rgb(162, 0, 255); height: 400px;" id="box">
    <div id="container">
      <a href="'#">link1</a> some text...<br><br>
      <a href="'#">link2</a> some more text 2....<br><br>
      <a href="'#">link3</a> some text 3....<br><br>
      <a href="'#">link4</a> some text 3....<br><br>
      <a href="'#">link5</a> some text 3....<br><br>
      <a href="'#">link6</a> some text 3....<br><br>
      <a href="'#">link7</a> some text 3....<br><br>
      <a href="'#">link8</a> some text 3....<br><br>
    </div>
</div>