nbg15 nbg15 - 1 month ago 7
jQuery Question

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

I have an HTML

<aside>
container and at this container I have
<div>
element which contains a
<span>
elements (which is my button)

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

This was my try:

Here is my fiddle:
https://jsfiddle.net/3hnLs81q/4/

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

$(aside).children(span)


but it doesn't work.

Answer

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:

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

Comments