加载按钮（），但对于动态每个子元素

我有一个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

是的，你可以！如果你知道样式应该是相同的，那么这是一件很棒的事情！ –

加载按钮（），但对于动态每个子元素

回答

相关问题