按钮事件悬停/活动也会影响其他表单按钮

我有一些CSS试图按下“活动”或“悬停”事件的按钮效果，但出于一些奇怪的原因，事件的CSS也出现影响其他没有被徘徊或活动的按钮。按钮事件悬停/活动也会影响其他表单按钮

请参阅下面的示例 - 当您将鼠标悬停在三个按钮中的任意一个按钮上时，其他边缘会发生变化，并在不应该受到任何影响时向上/向下移动。

发生了什么事？

input[type="button"], input[type="reset"], input[type="submit"] { 
 
     color: #000000; 
 
     cursor: pointer; 
 
     overflow: visible; 
 
     background-color: #F0F0F0; 
 
     border-bottom: none; 
 
     border-top: 1px solid #CCCCCC; 
 
     /*box-shadow: 0 -4px 0 #CCCCCC inset;*/ 
 
     box-shadow: 0 -4px 0 0 rgba(204, 204, 204, 1) inset; 
 
     border-collapse: separate; 
 
     margin-bottom: 0; 
 
     padding: 3px 13px 6px 13px; 
 
     position: relative; 
 
     text-transform: uppercase; 
 
     background-clip: padding-box; 
 
     border-bottom-right-radius: 4px; 
 
     border-right: 1px solid #CCCCCC; 
 
     border-top-right-radius: 4px; 
 
     border-bottom-left-radius: 4px; 
 
     border-left: 1px solid #CCCCCC; 
 
     border-top-left-radius: 4px; 
 
     background-image: none; 
 
    } 
 

 
    input[type="submit"]:hover, 
 
    input[type="button"]:hover { 
 
     box-shadow: 0 -2px 0 #CCCCCC inset; 
 
     margin-top: 4px; 
 
     padding-bottom: 4px; 
 
     background-image: none; 
 
    }

<center> 
 

 
    <input value="Yes, submit now!" name="button" type="submit"> 
 
       <!-- WARNING: value of button is checked on next page --> 
 
       <input value="No, enter more details" name="button" type="submit"> 
 
       <input value="Exit" name="button" type="submit"> 
 
    </center>

来源

2016-10-10 geogan

以及它们移动，因为他们得到的边距之一：该元素

我建议后，他们的所有移动4PX，所以你:hover

使用 transform:translateY(4px)代替 margin-top:4px

请参阅下面的代码

input[type="button"], input[type="reset"], input[type="submit"] { 
 
     color: #000000; 
 
     cursor: pointer; 
 
     overflow: visible; 
 
     background-color: #F0F0F0; 
 
     border-bottom: none; 
 
     border-top: 1px solid #CCCCCC; 
 
     /*box-shadow: 0 -4px 0 #CCCCCC inset;*/ 
 
     box-shadow: 0 -4px 0 0 rgba(204, 204, 204, 1) inset; 
 
     border-collapse: separate; 
 
     margin-bottom: 0; 
 
     padding: 3px 13px 6px 13px; 
 
     position: relative; 
 
     text-transform: uppercase; 
 
     background-clip: padding-box; 
 
     border-bottom-right-radius: 4px; 
 
     border-right: 1px solid #CCCCCC; 
 
     border-top-right-radius: 4px; 
 
     border-bottom-left-radius: 4px; 
 
     border-left: 1px solid #CCCCCC; 
 
     border-top-left-radius: 4px; 
 
     background-image: none; 
 
    } 
 

 
    input[type="submit"]:hover, 
 
    input[type="button"]:hover { 
 
     box-shadow: 0 -2px 0 #CCCCCC inset; 
 
     transform:translateY(4px); 
 
     padding-bottom: 4px; 
 
     background-image: none; 
 
    }

<center> 
 

 
    <input value="Yes, submit now!" name="button" type="submit"> 
 
       <!-- WARNING: value of button is checked on next page --> 
 
       <input value="No, enter more details" name="button" type="submit"> 
 
       <input value="Exit" name="button" type="submit"> 
 
    </center>

来源

2016-10-10 10:37:26

您的建议工作。我没有意识到它们是内联的，并且如果内联中的边距发生变化，则线上的所有内容都会上移或下移。如果你认为它们是某种文本，我认为这是有道理的。我宁愿使用你的firt选项，但与旧浏览器的兼容性如何 - 我以前从未使用或听说过该转换方法... – geogan

https://developer.mozilla.org/zh-CN/docs/Web/ CSS /转换向下滚动到浏览器兼容性。 'CSS转换属性'通常用于所有值'scale，translate，rotate'。一些像'matrix3d'或'perspective'这样的'values'等不太被支持。但'翻译'肯定是。充满信心地使用它 –

按钮事件悬停/活动也会影响其他表单按钮

回答

相关问题