遍历 "hover" 函数

Question

对于我正在网站上工作的客户。她想要一个可以找到她公司的价格和费率的部分。我只想创建一个 class，当这个人将鼠标悬停在“这个”class 上时，就会出现该按钮。

好吧，这就是让我感到复杂的地方。此时，当此人将鼠标悬停在“prices1”部分时，两个按钮都会出现在两个部分中。

我已经尝试给“.arrow”赋予属性“this”，但是，从逻辑上讲，“a”部分将向上移动，而不是“.arrow”class .

非常感谢您的帮助！

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

您应该尝试使用 hide() 和 show() 函数而不是 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>

遍历 "hover" 函数

Iterate through "hover" function

html

javascript

jquery

this

hover