爲什麼更改邊距：懸停會導致所有事件發生更改？

-1

<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元素之一，他們所有的保證金褲獲取設置這是爲什麼？我只想要一個.cta元素受到影響。

來源

2014-11-05 cantread

你的CSS是正確的。我懷疑代碼中存在拼寫錯誤，或者您安排這些元素的方式會讓您的鼠標同時在所有元素上懸停。 – AVAVT 2014-11-05 07:19:52

這是您的代碼[一個小提琴]（http://jsfiddle.net/danield770/h0au7tfm/） - 究竟是什麼問題？ – Danield 2014-11-05 07:25:52

-1

如果你想在hover效果應用到<div id="cta">，然後更改喜歡這一點，那麼你的懸停代碼影響將被應用到主分區

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

來源

2014-11-05 07:13:47 Umair

但我只想要1個.cta元素受到影響，而不是全部3個，這是我在使用此設置時遇到的問題。 – cantread 2014-11-05 07:16:23

你可以分享你的HTML div與內容中的內容...它會更好的idd你張貼您的jsfiddle.net鏈接 – Umair 2014-11-05 07:19:49

-1

我不符合您的問題，這裏的我的演示對你的問題，你能看到嗎？ 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; 
}

來源

2014-11-05 07:20:38 Abruzzi

再次閱讀問題。 – 2014-11-05 07:25:22

「規則'.cta：hover'將對所有具有'.cta'類的標籤生效。這完全不正確。如果單個實例被懸停，懸停效果將不會擴展到具有該類的所有元素。 – Terry 2014-11-05 07:27:45

@Terry是的特里，你是對的，我錯了 – Abruzzi 2014-11-05 07:38:41

-2

你的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"股利將有希望的hover效果。

來源

2014-11-05 07:23:21 YNS

再次閱讀問題，而不是其他答案。 – 2014-11-05 07:24:25

爲什麼更改邊距：懸停會導致所有事件發生更改？

回答

相關問題