Question

我有一个HTML <aside>容器，在这个容器中我有<div>元素，其中包含<span>元素（这是我的按钮）

我只想将鼠标悬停在<div>元素（播放器名称）上时显示一个按钮，但动态地为我的足球运动员列表中的每个玩家显示

这是我的尝试：

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

让它变得动态。我以为我可以使用像

这样的东西

$(aside).children(span)

但它不起作用。

Answer 1

你可以用纯CSS实现这一点。

此CSS与您现有的HTML一起使用。请注意底部的样式会更改您的孩子<span>元素在悬停时的可见性。

.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/

在.hover（）上加载按钮，但动态地为每个子元素

1 个答案: