代码之家 › 专栏 › 技术社区 › yaylitzis

将悬停时div的内容替换为fadeIn和fadeOut

jquery javascript

yaylitzis · 技术社区 · 4 年前

div 当用户悬停在上面时。我创造了两个 部门 的。这个 foreground 部门 是我想要隐藏的默认悬停动作 前景 展示 background 部门 .

$('.background').hide();

$(".card-text").mouseenter(function() {
  console.log("enter");
  $(this).next('.foreground').fadeOut();
  $(this).next('.background').fadeIn();
});

$(".card-text").mouseleave(function() {
  console.log("leave");
  $(this).next('.foreground').fadeIn();
  $(this).next('.background').fadeOut();
});

.card-text{
  background-color: #d7f1f5;
  padding: 5px;  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-text">
  <div class="foreground">
    <p>MyTitle 1</p>
    <p>Bla bla bla 1</p>
  </div>

  <div class="background">
    <p>Hoveerr 1</p>
  </div>
</div>

<div style="background-color: black; padding: 5px; margin:50px 0px;"></div>

<div class="card-text">
  <div class="foreground">
    <p>MyTitle2 </p>
    <p>Bla bla bla 2</p>
  </div>

  <div class="background">
    <p>Hoveerr 2</p>
  </div>
</div>

1 回复 | 直到 4 年前

Rory McCrossan Hsm Sharique Hasan 4 年前

问题是因为你在使用 next() find()

请注意,在下面的示例中,我还向 stop() 这样就避免了在DOM更新时多次调用事件时发生的闪烁。

$(".card-text").on('mouseenter', function() {
  $(this).find('.foreground').stop(true).fadeOut();
  $(this).find('.background').stop(true).fadeIn();
});

$(".card-text").on('mouseleave', function() {
  $(this).find('.foreground').stop(true).fadeIn();
  $(this).find('.background').stop(true).fadeOut();
});

.background { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card-text">
  <div class="foreground">
    <p>MyTitle 1</p>
    <p>Bla bla bla 1</p>
  </div>

  <div class="background">
    <p>Hoveerr 1</p>
  </div>
</div>

<div style="background-color: black; padding: 5px;"></div>

<div class="card-text">
  <div class="foreground">
    <p>MyTitle2 </p>
    <p>Bla bla bla 2</p>
  </div>

  <div class="background">
    <p>Hoveerr 2</p>
  </div>
</div>

值得注意的是,您应该尽可能使用CSS,因为它的性能比JS好得多。要做到这一点,你可以钩 :hover 国家对 .card-text 和 transition 基于子元素的 opacity . 试试这个:

.card-text {
  display: grid;
}

.card-text div {
  transition: opacity 0.4s;
  grid-column: 1;
  grid-row: 1;
}
.foreground { opacity: 1; }
.background { opacity: 0; }

.card-text:hover .foreground { opacity: 0; }
.card-text:hover .background { opacity: 1; }

<div class="card-text">
  <div class="foreground">
    <p>MyTitle 1</p>
    <p>Bla bla bla 1</p>
  </div>

  <div class="background">
    <p>Hoveerr 1</p>
  </div>
</div>

<div style="background-color: black; padding: 5px;"></div>

<div class="card-text">
  <div class="foreground">
    <p>MyTitle2 </p>
    <p>Bla bla bla 2</p>
  </div>

  <div class="background">
    <p>Hoveerr 2</p>
  </div>
</div>