图像在悬停+增长时跳出其绝对位置

Posted 2023-03-06

【中文标题】图像在悬停+增长时跳出其绝对位置

【英文标题】：Image jumping out of its absolute position on hover+grow

【发布时间】：2020-03-30 20:09:39

【问题描述】：

我有多个使用 CSS position: absolute 属性定位的图像。我希望他们在悬停/鼠标悬停时grow。但是，当我尝试将transform: scale 属性应用于图像时，图像会反复跳到所有图像下方并在那里增长，而不是在它们定义的位置增长。

如何将图像保持在正确的位置，同时在悬停/鼠标悬停时使它们grow？

我提前为科学怪人密码道歉。

JS、CSS、HTML

    function changeContent(description) 
        console.log(description);
        var MyDesc = document.getElementById(description);
        document.getElementById('content').innerhtml = MyDesc.value;
    

.container 
  display: flex;
  align-items: center;
  justify-content: center;


img, span
   display:table-cell;


.grow 
    transition: all .2s ease-in-out;
    
    
.grow:hover 
    transform: scale(1.1);
    

#main 
  width: 100%;

#photo 
  display:flex;


#photo > #photo-center 
  width:100%;
  position:relative;
  display: block;
  margin-left: auto;
  margin-right: 0px;


/* Diagram */
#large
    width:100%;
  

/* Server Ops 2 - Bob */
#ops2
    width:17%;
    position:absolute;
    left:44%;
    right:0px;
  top:0%;
  z-index:1;
    
 
/* Server Ops 1 - Alice */
#ops1
    width:17%;
    position:absolute;
    left:85%;
    right:0px;
  top:0%;
  z-index:1;
    
    
    /* QA Black Box - Steve */
#qablack
    width:10%;
    position:absolute;
    left:60%;
    right:0px;
  top:37%;
  z-index:1;
    
    
    /* QA Load Testing - Jerry */
#qaload
    width:17%;
    position:absolute;
    left:63%;
    right:0px;
  top:68%;
  z-index:1;
    
    
    /* QA Software Engineer - Alex */
#qasoft
    width:17%;
    position:absolute;
    left:73%;
    right:0px;
  top:38%;
  z-index:1;
    
    
    /* Manager 2 - Peter */
#mang2
    width:15%;
    position:absolute;
    left:22%;
    right:0px;
  top:-6%;
  z-index:1;
    
    
    /* Manager 1 - Craig */
#mang1
    width:13%;
    position:absolute;
    left:6%;
    right:0px;
  top:-4%;
  z-index:1;
    
    
    /* Software Engineer 1 - Bill */
#soft1
    width:15%;
    position:absolute;
    left:0%;
  top:50%;
  z-index:1;
    
    
    /* Software Engineer 2 - Jared */
#soft2
    width:9%;
    position:absolute;
    left:3%;
    right:0px;
  top:23%;
  z-index:1;
    

<strong><div style="font-size:20px" class="container" id="content">Hover over a character to discover their Workflow Woes!</div></strong>

<div id="main">
        <div id="photo">
           <div id="photo-center">   
             <img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:traditional3.jpg" id="large">
             <div class="grow">
               <a onmouseover="changeContent('desc1')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops2.png" id="ops2"></a>
                 <input type="hidden" id="desc1" value="apples are delicious">
               </div>
               <div class="grow">
                <a onmouseover="changeContent('desc2')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:server_ops1.jpg" id="ops1"></a>
                  <input type="hidden" id="desc2" value="Oranges are healthy">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc3')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer1.png" id="soft1"></a>
                <input type="hidden" id="desc3" value="Candy is tasty!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc4')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:soft_engineer2.png" id="soft2"></a>
                <input type="hidden" id="desc4" value="hhhh!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc5')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_black_box.png" id="qablack"></a>
                <input type="hidden" id="desc5" value="aaaa!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc6')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_load.png" id="qaload"></a>
                <input type="hidden" id="desc6" value="pppp!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc7')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:qa_soft_engineer.png" id="qasoft"></a>
                <input type="hidden" id="desc7" value="lollll!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc8')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager1.png" id="mang1"></a>
                <input type="hidden" id="desc8" value="bowowow!">
                </div>
                <div class="grow">
                <a onmouseover="changeContent('desc9')" href="#"><img src="https://sawtoothcapstone.com/lib/exe/fetch.php?media=sawtooth:deliverables:manager2.png" id="mang2"></a>
                <input type="hidden" id="desc9" value="meowww!">
                </div>
          </div>
        </div> 
      </div>

（运行片段然后在整页中打开）

【问题讨论】：

尝试在 img 元素上添加一个类“grow”，而不是 div。

好的，太好了，谢谢

我已经提交了答案，如果您需要任何帮助，请告诉我

【参考方案1】：

尝试在“img”元素中添加“grow”类，而不是Div元素