Target single button of many on hover using JQuery & stop flickering when visible button hovered-CodePudding

I have created a page with multiple images which when hovered over, fade away and a button appears over the top. The button then hides and the image reappears when the cursor is moved away. I wanted to do this using JQuery to improve my skills. I am fairly new to coding, so would really appreciate some direction on the problem.

I have been able to do both of these things, however;

1 - the button appears on all images (there are 6 in total) rather than just the one that is being hovered over.

2 - when I hover over the button, it and the background image begin to flash. If I click the button, the flashing of the button and image continues.

I believe these is due to how I am targeting the button specifically, but I cannot seem to get it right using the ‘this’ way of targeting. Is this correct or am I missing something very important?

Thank you for your help!

$(document).ready(function() {

  $(".card-img").hover(
    function() {
      $(this).animate({
        opacity: 0.1,
      }, 600);
    },
    function() {
      $(this).animate({
        opacity: 1.0,
      }, 600);
    });

  $(".card-img").hover(
    function() {
      $(".button-projects").css('visibility', 'visible');
    },
    function() {
      $(".button-projects").css('visibility', 'hidden');
    });

})

/* button Styling */

.button-main {
  background-color: #000000;
  border-radius: 100000px;
  color: white;
  padding: 8px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 27px;
  border: none;
}

.card {
  border: none;
  background-color: transparent;
  margin-top: 80px;
  border-radius: 0px;
}

.card-img-top {
  border: black solid 4px;
}

.card-img-ctr {
  position: relative;
  width: 100%;
}

.card-img {
  border-radius: 0em;
  border-top-right-radius: 0em;
  opacity: 1;
}

.card-img-ctr button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.button-projects {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <img  alt="Mockup images of Magnetic Eyes project website.">
        <button >More info</button>
      </div>

    </div>
  </div>
  <div >
    <div >
      <div >
        <img src="assets/images/bottle-brew.jpg"  alt="Mockup images of Bottle and Brew project.">
        <button >More info</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

I think this is what you want!

$(document).ready(function() {

  $(".card-img").hover(
    function() {
      $(this).animate({
        opacity: 0.1,
      }, 600);
    },
    function() {
      $(this).animate({
        opacity: 1.0,
      }, 600);
    });

  $(".card-img").hover(
    function() {
      $(this).siblings(".button-projects").css('visibility', 'visible');
    },
    function() {
      $(this).siblings(".button-projects").css('visibility', 'hidden');
    });

})

/* button Styling */

.button-main {
  background-color: #000000;
  border-radius: 100000px;
  color: white;
  padding: 8px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 27px;
  border: none;
}

.card {
  border: none;
  background-color: transparent;
  margin-top: 80px;
  border-radius: 0px;
}

.card-img-top {
  border: black solid 4px;
}

.card-img-ctr {
  position: relative;
  width: 100%;
}

.card-img {
  border-radius: 0em;
  border-top-right-radius: 0em;
  opacity: 1;
}

.card-img-ctr button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.button-projects {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <img  alt="Mockup images of Magnetic Eyes project website." src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg" style="width:100%;height:100px;">
        <button >More info</button>
      </div>

    </div>
  </div>
  <div >
    <div >
      <div >
        <img  alt="Mockup images of Magnetic Eyes project website." src="https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg" style="width:100%;height:100px;">
        <button >More info</button>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You can use .next() to find the button associated with the hovered element.

$(this).next(".button-projects").css('visibility', 'visible');

Demo

$(document).ready(function() {

  $(".card-img-ctr").on("mouseenter",function() {
    $(this).find(".card-img").animate({
      opacity: 0.1,
    }, 600);
    $(this).find(".button-projects").css('visibility', 'visible');
  });

  $(".card-img-ctr").on("mouseleave", function() {
    $(this).find(".card-img").animate({
      opacity: 1.0,
    }, 600);
    $(this).find(".button-projects").css('visibility', 'hidden');
  });



})

/* button Styling */

.button-main {
  background-color: #000000;
  border-radius: 100000px;
  color: white;
  padding: 8px 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 27px;
  border: none;
}

.card {
  border: none;
  background-color: transparent;
  margin-top: 80px;
  border-radius: 0px;
}

.card-img-top {
  border: black solid 4px;
}

.card-img-ctr {
  position: relative;
  width: 100%;
}

.card-img {
  border-radius: 0em;
  border-top-right-radius: 0em;
  opacity: 1;
}

.card-img-ctr button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.button-projects {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <div >
      <div >
        <img  alt="Mockup images of Magnetic Eyes project website.">
        <button >More info</button>
      </div>

    </div>
  </div>
  <div >
    <div >
      <div >
        <img src="assets/images/bottle-brew.jpg"  alt="Mockup images of Bottle and Brew project.">
        <button >More info</button>
      </div>
    </div>
  </div>
</div>