nbg15 nbg15 - 1 month ago 7
jQuery Question

Load button on .hover() but dynamically for each child element

I have an HTML

container and at this container I have
element which contains a
elements (which is my button)

I want to display a button only when I hover over the
element (name of the player), but dynamically for each player at my football players list

This was my try:

Here is my fiddle:

to make it dynamic. I thought I could use something like


but it doesn't work.


You can actually do this with pure CSS.

This CSS goes with your existing HTML. Note the style at the bottom changing your child <span> element's visibility on hover.

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

And the updated fiddle: