Iterate through "hover" function

Question

For a client I am working on a website. She wants a section where she can find the prices and rates of her company. I just want to create one class, and when the person will hover over "this" class, the button will appear.

Well here's where things get complicated for me. At this point, when the person hovers over the "prices1" section, both buttons will appear in both sections.

I tried already to give the ".arrow" the property "this", however, logically, the "a" section will move up, instead of the ".arrow" class.

Would appreciate some help!

 $(".prices1 a").hover(function () { $('.arrow').css({ "opacity": "100%", "transform": "translate(0%, -80%)", }); $('.button-tarieven p').css({ "transform": "translateY(-50%)", "opacity": "0%", }); }, function () { $('.arrow').css({ "transform": "translate(0%, 0%)", "opacity": "0%", }); $('.button-tarieven p').css({ "transform": "translateY(0%)", "opacity": "100%", }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="prices1"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg> <h2>Conversation</h2> <p>Nullam quis risus eget urna mollis ornare vel eu leo.</p> <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> <p>Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <div class="buttons-price"> <a href="#"> <p>Make appointment!</p> </a> </div> <a href=""> <div class="arrow"> <img src="img/arrow.png" alt="Arrow"> </div> </a> </div> <div class="prices1"> <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 225.992 197.776"></svg> <h2>Intake</h2> <p>Vestibulum id ligula porta felis euismod semper.</p> <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod.</p> <p>Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p> <div class="buttons-price"> <a href="#"> <p>Make appointment!</p> </a> </div> <a href=""> <div class="arrow"> <img src="img/arrow.png" alt="Arrow"> </div> </a> </div>

Answer 1

You should try using hide() and show() function instead of CSS.

And as @TKoL suggested use the $(this) to refer to the current target

Like this :

 $(".prices1 .trigger").hover(function() { $(this).find('.arrow').show(); }, function() { $(this).find('.arrow').hide(); }); //This is in order to hide the button at the page load ;) $('.arrow').hide();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="prices1"> <h2>Conversation</h2> <div class="trigger"> <a href="#"> <p>Make appointment!</p> </a> <a href="" class="arrow"> <div> <img src="img/arrow.png" alt="Arrow"> </div> </a> </div> </div> <div class="prices1"> <h2>Intake</h2> <div class="trigger"> <a href="#"> <p>Make appointment!</p> </a> <a href="" class="arrow"> <div> <img src="img/arrow.png" alt="Arrow"> </div> </a> </div> </div>