加載按鈕（），但對於動態每個子元素

我有一個HTML <aside>容器並在該容器予有<div>元件，其包含一個元件<span>（這是我的按鈕）加載按鈕（），但對於動態每個子元素

我想顯示一個按鈕只有當我將鼠標懸停在<div>元素（玩家名），但動態地爲每個玩家在我的足球運動員名單

這是我嘗試：

這裏是我的小提琴： https://jsfiddle.net/3hnLs81q/4/

使其動態。我以爲我可以使用類似

$(aside).children(span)

但它不起作用。

來源

2016-10-21 nbg15

請加[MCVE]你正在努力實現的問題本身，而不是第三方網站的內容。此外，更具體地說明什麼「不起作用」。 –

現在，這是一個無賴。你的小提琴按照你的期望工作。只需將jQuery添加到它。添加jQuery後看到你的小提琴：https：//jsfiddle.net/3hnLs81q/6/ –

你實際上可以用純CSS做到這一點。

此CSS與您現有的HTML一起使用。請注意，底部的樣式會改變您的子元素在懸停時的可見性。

.btnAddPlayer { 
    visibility: hidden; 
    background: #4ad934; 
    background-image: -webkit-linear-gradient(top, #4ad934, #37ab26); 
    background-image: -moz-linear-gradient(top, #4ad934, #37ab26); 
    background-image: -ms-linear-gradient(top, #4ad934, #37ab26); 
    background-image: -o-linear-gradient(top, #4ad934, #37ab26); 
    background-image: linear-gradient(to bottom, #4ad934, #37ab26); 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 14px; 
    padding: 0px 5px 0px 5px; 
    text-decoration: none; 
} 
.goalkeeper:hover span.btnAddPlayer { 
    visibility: visible; 
}

和更新的小提琴：

https://jsfiddle.net/3hnLs81q/5/

來源

2016-10-21 20:13:10

哇太棒了:)謝謝！不知道有那麼多的css可能性... 我也可以這樣做： .defender：hover，.goalkeeper：hover span.btnAddPlayer { visibility：visible; visible; } – nbg15

實現多於一個類的懸停效果？ – nbg15

是的，你可以！如果你知道樣式應該是相同的，那麼這是一件很棒的事情！ –

加載按鈕（），但對於動態每個子元素

回答

相關問題