Question

我有一些CSS尝试在按键效果上按下＆＃34;活动＆＃34;或者＆＃34;悬停＆＃34;事件但由于一些奇怪的原因，事件中的CSS似乎也会影响其他没有悬停或活动的按钮。

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

发生了什么？

＆＃13;

    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;
    }

＆＃13;

    <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>

＆＃13;

Answer 1

好吧，他们之所以移动，是因为他们中的一个获得了边缘顶部：4px，所以他们都在该元素之后移动

我建议您在transform:translateY(4px)

上使用margin-top:4px代替:hover

请参阅下面的代码段

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

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

1 个答案: