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

【问题标题】：margin-top and mouse hover are not working properlymargin-top 和鼠标悬停无法正常工作
【发布时间】：2018-07-18 06:59:01
【问题描述】：

这是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 向上移动。

【问题讨论】：

查看.courses 和.courselist 的高度。请设置一个带有图像链接的小提琴。这不是 asp.net 的问题。
如果我理解的话，你需要在.courselist #webcrsebtn 中加上margin-top:20px;，所以它们是一样的？？我不明白这个问题。尝试重现它。
在两个 ImageButton 中添加 margin-top 或添加一个 imagebutton 得到相同的结果
是的，我无法弄清楚您的问题/问题是什么。
我在一个 imageButton 中添加 margin-pad 那么为什么这个 margin-top 属性会自动应用于另一个 imagebutton

标签： html css

【解决方案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>

【讨论】：

对不起，从你的问题的措辞和提供的代码来看，我认为第一张图片是要偏移的。我的第二个示例现在具有悬停效果。

【解决方案2】：

我不能说为什么 margin-top 属性不起作用 - 这让我感到困惑。但是，您可以将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

【讨论】：