Question

我的HTML看起来像这样：

<div id="cta">
     <div class="cta"></div>
     <div class="cta"></div>
     <div class="cta"></div>
</div>

我的CSS看起来像这样：

.cta {
     margin-bottom: -50px;
     transition: margin-bottom .2s;
}
.cta:hover {
     margin-bottom: 0px;
}

每当我将鼠标悬停在3个cta元素中的一个上时，它们的所有边距底部都设置为0.为什么会这样？我只想要一个.cta元素受到影响。

Answer 1

如果您要将hover效果应用于<div id="cta">，请更改此类代码，然后您的悬停影响将应用于主div

.cta {
 margin-bottom: -50px;
 transition: margin-bottom .2s;
}
#cta:hover {
 margin-bottom: 0px;
}

Answer 2

我不能解决你的问题，这是我的问题的演示，你能看到吗？ http://jsfiddle.net/abruzzi/1ns7ru0g/

#cta {
    margin: 100px;
}
.cta {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin-bottom: -50px;
    transition: margin-bottom .2s;
    opacity: 0.7;
}
.cta:hover {
     margin-bottom: 0px;
}


// below code for debug
.cta:nth-of-type(0) {
    background-color: red;
}
.cta:nth-of-type(1) {
    background-color: green;
}
.cta:nth-of-type(2) {
    background-color: blue;
}

Answer 3

将您的HTML更改为：

<div id="cta">
     <div class="cta" id="ctahov"></div>
     <div class="cta"></div>
     <div class="cta"></div>
</div>

和你的CSS：

.cta {
 margin-bottom: -50px;
}
#ctahov {
 transition: margin-bottom .2s;
}
#ctahov:hover {
 margin-bottom: 0px;
}

这样，只有id="ctahov"的div才会产生所需的hover效果。

为什么要更改保证金：悬停会导致所有事件发生变化？

3 个答案: