javascript div在大小扩展时移动其他div

fnvucqvd 于 2023-04-10 发布在 Java

关注(0)|答案(2)|浏览(112)

我试图建立一个div行，当鼠标悬停在它上面时，一个div会扩展。到目前为止，我已经做到了，但我希望扩展的div不会移动其他div（改变大小），而是扩展到他的邻居，部分覆盖它们。
我希望你明白我的意思。
我也想保留js部分，因为当鼠标悬停在元素上时，应该会发生更多的事情。
以下是我目前为止的代码：

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8" />
    <style>
        .wrap{
            font-size: 160px;
            font-weight: bold;
            height: 450px;
            width: 1100px;
            display: flex;
            flex-direction: row;
            align-items: center;
            border-style: solid;
            border-width: 1px;  
        }
        .a{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .b{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .c{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .d{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
        .e{
            width: 220px;
            height: 350px;
            border-style: solid;
            border-width: 1px;
        }
    </style>
    <script type="application/javascript">
        function enlarge(id){
            /*console.log("enlarge: " + id);*/
            var element = document.getElementById(id);
            element.style.height = "440px";
            element.style.width = "260px";
            element.style.borderWidth = "1px";
            element.style.borderStyle = "solid";
            
        }
        function reduce(id){
            /*console.log("reduce: " + id);*/
            var element = document.getElementById(id);
            element.style.height = "350px";
            element.style.width = "220px";
            element.style.borderWidth = "1px";
            element.style.borderStyle = "solid";
        }
    </script>
</head>
<body>  
    <center>
    
        <div class="wrap">
            <div class="a" id="a" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">A</div>
            <div class="b" id="b" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">B</div>
            <div class="c" id="c" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">C</div>
            <div class="d" id="d" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">D</div>
            <div class="e" id="e" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">E</div>
        </div>
    
    </center>
</body>
</html>

关于jsfiddle：https://jsfiddle.net/fkdvptuz/

JavaScript

来源：https://stackoverflow.com/questions/75970580/div-moves-other-divs-when-size-expands

2条答案

按热度按时间

oyxsuwqo1#

只需添加一个 Package 器div来存储每个的真实的大小，将其位置设置为relative，然后将每个扩展div的位置设置为absolute。
就像这样：html

<center>
  <div class="wrap">
    <div class="growing-wraper">
      <div class="expanding-el a" id="a" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">A</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el b" id="b" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">B</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el c" id="c" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">C</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el d" id="d" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">D</div>
    </div>

    <div class="growing-wraper">
      <div class="expanding-el e" id="e" onmouseover="enlarge(this.id)" onmouseout="reduce(this.id)">E</div>
    </div>
  </div>
</center>

.wrap {
    font-size: 160px;
    font-weight: bold;
    height: 450px;
    width: 1100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-style: solid;
    border-width: 1px;
  }
  .growing-wraper {
    width: 220px;
    height: 350px;
    position: relative;
  }

  .expanding-el {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .expanding-el:hover {
//This will give an effect of overlap neighbor element
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); 

//This will overlap 
    z-index: 1;
  }

  .a {
    border-style: solid;
    border-width: 1px;
  }

  .b {
    border-style: solid;
    border-width: 1px;
  }

  .c {
    border-style: solid;
    border-width: 1px;
  }

  .d {
    border-style: solid;
    border-width: 1px;
  }

  .e {
    border-style: solid;
    border-width: 1px;
  }

另外，如果你只想在悬停时增加元素的大小，你可以使用transform:scale(1.5) CSS属性。你不需要有一个很长的CSS麻烦代码。
希望这对你有帮助：）

赞(0）回复(0）举报 2023-04-10

hc8w905p2#

为了实现你想要的行为，你需要使用CSS的属性translate: scale()来改变特定div的大小，而不是直接改变宽度和高度，你仍然可以为其他逻辑保留onmouseover和onmouseout事件处理程序，但是缩放将使用CSS来完成。
下面是jsfiddle的link，我刚刚在每个div中添加了block类：

.block:hover {
  transform: scale(1.2)
}

赞(0）回复(0）举报 2023-04-10

我来回答

javascript div在大小扩展时移动其他div

2条答案

相关问题

热门标签

最新问答