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

When I hover on Button to increase its size , the elements under it move to down

本文关键字：小时 元素 移动 Button 悬停 增加 鼠标      更新时间：2023-09-26

我在我的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向下如何解决这个问题?

您可以尝试创建一个内容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;
}

这里是小提琴:https://jsfiddle.net/aitorrodriguez/tgL7r725/2/

这样的东西应该解决你的问题;)

@chrona是对的，也使用position for hove不是一个好的做法。试试下面的代码。我已经修改了你的代码一点，希望这对你有用。

CSS 

input{
    background-color:green; 
    color:white;
    width:100px;
    height:40px;
    font-size: 12px;
    border: 0;
}
input#sol{
    background-color:#606 ; color:#FFF
}
#newEx:hover{ 
    background-color:#606 ; 
    font-size: 13px;
 }
#sol:hover{ 
    background-color:green;
    font-size: 13px;
}

相关文章：