javascript - 当我将鼠标悬停在 Button 上以增加其大小时，其下方的元素会向下移动

Question

我的 HTML 页面中有一个按钮，如果我将鼠标悬停在它上面，它的大小会增加，并且可以正常工作，但是问题是，当我将鼠标悬停在它上面时，它下面的元素会向下移动，就像移动或东西

HTML

<td><input name="newEx" type="button" id="newEx" style="background- color:green ; color:white"  align ="left" value="مسألة جديدة"  onclick="randomArray(6,1,99)"height="30px" width="85px" /> 

<input name="sol" type="button"  id="sol" style="background-color:#606 ; color:#FFF  " align="left" value="الحل النموذجي" onclick="solution()"  height="30px" width="85px"/></td>

CSS

    #newEx:hover{ 
 width:100px;
 height:40px;}

    #sol:hover{ 
 width:100px;
 height:40px;}

在这两个按钮下面，有一个div，悬停在其中一个上后，这个div往下 如何解决这个问题？

Answer 1

您可以尝试创建一个内容 div 并将按钮放在 div 中。

HTML:

<div class="content-div">
    <input name="newEx" type="button" id="newEx" align ="left" value="مسألة جديدة" onclick="randomArray(6,1,99)" height="30px" width="85px" />

    <input name="sol" type="button" id="sol" align="left" value="الحل النموذجي" onclick="solution()"  height="30px" width="85px"/>
</div>

<div style="width: 100%; height: 100px; background-color: red;"></div>

CSS:

.content-div {
    position: relative;
    height: 40px;
}
#newEx {
    background-color: green;
    color: white;
}
#newEx, #sol {
    margin-top: 5px;
}
#sol {
    background-color:#606;
    color:#FFF  
}
#newEx:hover, #sol:hover { 
    width:100px;
    height:40px;
    margin-top: 0;
}

这是一个 fiddle :https://jsfiddle.net/aitorrodriguez/tgL7r725/2/

这样的事情应该可以解决您的问题；)