Повторите процедуру с помощью функции "наведения курсора мыши"

#javascript #html #jquery #hover #this

#javascript #HTML #jquery ( jquery ) #наведите курсор #это

Вопрос:

Для клиента я работаю над веб-сайтом. Ей нужен раздел, в котором она могла бы найти цены и тарифы своей компании. Я просто хочу создать один класс, и когда пользователь наведет курсор на «этот» класс, появится кнопка.

Что ж, вот тут-то все и усложняется для меня. На этом этапе, когда пользователь наводит курсор мыши на раздел «prices1», обе кнопки появятся в обоих разделах.

Я уже пытался присвоить «.arrow» свойству «this», однако, по логике вещей, раздел «a» будет перемещаться вверх вместо класса «.arrow».

Был бы признателен за помощь!

 $(".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>

1. Вам следует попробовать использовать шаблон, подобный $(this).find('.arrow').css() — using $(this).find , который позволит вам применять код только к дочерним элементам определенного элемента, на который вы наводите курсор

2. Спасибо! Я постараюсь! 🙂

3. Спасибо! Это сработало! Ценю вашу помощь!

4. Никаких проблем. В будущем вам не захочется ограничиваться поиском только дочерних элементов элемента, на который вы наводите курсор или щелкаете, а скорее потомков какого-то общего предка кнопки, на которую вы нажимаете, или что-то в этом роде. В таком случае вы могли бы сделать что-то вроде $(this).closest('.parent-class').find('.arrow').css()

Ответ №1:

Вам следует попробовать использовать hide() show() функцию and вместо CSS.

И, как предложил @TKoL, используйте $(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>