How do I make only the container to move?-CodePudding

I'm trying to make the only container its contents to move but its move also its parent, that contains the background, which is supposed to be fixed (like the whole parent div). How can I fix that?

my code:

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

CodePudding user response：

If you assign an id to the above div and assign the hover event to the element it works.

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