jquery - 在 .hover() 上加载按钮，但为每个子元素动态加载

Question

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

我只想在将鼠标悬停在 <div> 上时显示按钮元素(球员姓名)，但针对我的足球运动员列表中的每个球员动态

这是我的尝试:

这是我的 fiddle : https://jsfiddle.net/3hnLs81q/4/

使其动态。我想我可以使用类似的东西

$(aside).children(span)

但它不起作用。

Answer 1

实际上，您可以使用纯 CSS 来做到这一点。

此 CSS 与您现有的 HTML 相匹配。注意底部的样式改变你的 child <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;
}

更新后的 fiddle :

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