按鈕事件懸停/活動也會影響其他表單按鈕

我有一些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'等不太被支持。但'翻譯'肯定是。充滿信心地使用它 –

按鈕事件懸停/活動也會影響其他表單按鈕

回答

相關問題