html - margin-top 和鼠标悬停无法正常工作

Question

这是 aspx 文件:

<div class="courses">
                <h1>Courses</h1>
                <div class="courselist">
                <asp:ImageButton ID="webcrsebtn" runat="server" ImageUrl="~/images/frontendbtnbgc.jpg" />
                <asp:ImageButton ID="reactntivebtn" runat="server" ImageUrl="~/images/reactnativebtnbgc.jpg" />
                </div>
    </div>

这是相应的CSS:

.courses
{
    height: 100px;
}
.courses h1
{
    width: 100%;
    text-align:center;
    padding-top:80px;
    padding-bottom: 40px;
    color:#548DD4;
    font-weight:500;
    font-size: 40px;
    margin-bottom:50px;
}
.courselist
{
    width: 100%;
    height: 300px;
    border: 2px solid red;
}
.courselist #webcrsebtn
{

    height:250px;
    width:250px;
    margin-left:90px;
    -webkit-box-shadow:0px 00px 4px #888888;
    -moz-box-shadow:0px 0px 4px #888888;
    box-shadow:0px 0px 4px #888888;
    border-radius: 5px;
}
.courselist #webcrsebtn:hover
{
    margin-top:0px;
}
.courselist #reactntivebtn
{
    margin-top:20px;
    height:250px;
    width:250px;
    margin-left:90px;
    -webkit-box-shadow:0px 00px 4px #888888;
    -moz-box-shadow:0px 0px 4px #888888;
    box-shadow:0px 0px 4px #888888;
    border-radius: 5px;
}
.courselist #reactntivebtn:hover
{
    margin-top:0px;
}

这是图片: enter image description here enter image description here

当我在一个 ImageButton 中设置 margin-top 时，它会自动应用于另一个 ImageButton。在鼠标悬停时 margin-top: 0px 不起作用。

我正在尝试在鼠标悬停时 ImageButton 向上移动。

Answer 1

display:inline-block 的图像和其他元素在垂直方向上相互对齐。查看它们的 vertical-align 属性，您会看到默认情况下它设置为 baseline。如果您调整一个元素的上边距，它会影响另一个元素。

通过使用float，您可以从正常的文档流中移除元素并使它们独立。

.courses {
    /*height: 100px;*/
}

.courses h1 {
    width: 100%;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 40px;
    color: #548DD4;
    font-weight: 500;
    font-size: 40px;
    margin-bottom: 50px;
}

.courselist {
    width: 100%;
    height: 300px;
    border: 2px solid red;
}

.courselist #webcrsebtn {
    
    height: 250px;
    width: 250px;
    margin-left: 90px;
    -webkit-box-shadow: 0px 00px 4px #888888;
    -moz-box-shadow: 0px 0px 4px #888888;
    box-shadow: 0px 0px 4px #888888;
    border-radius: 5px;
    /*NEW - float*/
    float:left;
}

.courselist #webcrsebtn:hover {
    margin-top: 0px;
}

.courselist #reactntivebtn {
    margin-top: 20px;
    height: 250px;
    width: 250px;
    margin-left: 90px;
    -webkit-box-shadow: 0px 00px 4px #888888;
    -moz-box-shadow: 0px 0px 4px #888888;
    box-shadow: 0px 0px 4px #888888;
    border-radius: 5px;
    /*NEW - float*/
    float:left;
}

.courselist #reactntivebtn:hover {
    margin-top: 0px;
}

<div class="courses">
    <h1>Courses</h1>
    <div class="courselist">
        <img ID="webcrsebtn" src="https://picsum.photos/300/300" />
        <img ID="reactntivebtn" src="https://picsum.photos/300/300" />
    </div>
</div>

附带说明一下，我会考虑使用类来整合您的 CSS。此示例还对两个按钮产生了悬停效果。

.courses {
    /*height: 100px;*/
}

.courses h1 {
    width: 100%;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 40px;
    color: #548DD4;
    font-weight: 500;
    font-size: 40px;
    margin-bottom: 50px;
}

.courselist {
    width: 100%;
    height: 300px;
    border: 2px solid red;
}

.courselist .imgButton {
    margin-top: 20px;
     height: 250px;
    width: 250px;
    margin-left: 90px;
    -webkit-box-shadow: 0px 00px 4px #888888;
    -moz-box-shadow: 0px 0px 4px #888888;
    box-shadow: 0px 0px 4px #888888;
    border-radius: 5px;
    /*NEW - float*/
    float:left;
}


.courselist .imgButton:hover {
    margin-top: 0px;
}

<div class="courses">
    <h1>Courses</h1>
    <div class="courselist">
        <img ID="webcrsebtn" class="imgButton" src="https://fillmurray.com/250/250" />
        <img ID="reactntivebtn" class="imgButton" src="https://fillmurray.com/g/250/250" />
    </div>
</div>