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中提供页边空白时，它会自动应用于另一个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>

Answer 2

我不能说为什么保证金最高的资产不起作用-这使我感到困惑。但是，您可以将postion: relative;与top: 20px;和:hover { top: 0; }

一起使用

HTML：

<div class="courses">
    <h1>Courses</h1>
    <div class="courselist">
        <image ID="webcrsebtn" src="https://picsum.photos/300/300" />
        <image 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;
}

#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;
    position: relative;
    top: 20px;
}

#webcrsebtn:hover {
    top: 0px;
}

#reactntivebtn {
    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;
    position: relative;
    top: 20px;
}

#reactntivebtn:hover {
    top: 0px;
}

这是DEMO

边距顶部和鼠标悬停无法正常工作

2 个答案: