nbg15 nbg15 - 3 years ago 67
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.

Answer Source

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:


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download