Question

悬停时内容已更改，但在删除悬停时旧内容未被替换。

$('div.animalcontent').hide();
$('div').hide();
$('p.animal').bind('mouseover', function() {
  $('p.animal').hide();
  $('div.animalcontent').fadeOut();
  $('#' + $(this).attr('id') + 'content').fadeIn();
});

.animalcontent {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<p class='animal' id='dog'>dog url</p>
<div id='dogcontent' class='animalcontent'>Doggiecontent!</div>

有人知道吗？

Answer 1

首先，jQuery 1.5.2已经过时了7年。你应该立即升级它，理想情况下升级到v3分支上的东西。

您的问题是因为您没有管理mouseleave事件的逻辑来替换您已经淡入/淡出的内容的状态。

话虽如此，您根本不需要JS，因为CSS更适合此任务，因为它消除了对JS（可能被禁用）的依赖，并且它也表现得更好。

您可以使用:hover伪选择器和transition规则来执行淡入淡出。像这样：

＆＃13;

.hover-toggle-container { 
  position: relative;
  height: 1.5em;
}
.hover-toggle-container > div {
  position: absolute;
  transition: opacity 0.3s; 
}

.hover-toggle-container .primary { opacity: 1; }
.hover-toggle-container .secondary { opacity: 0; }

.hover-toggle-container:hover .primary { opacity: 0; }
.hover-toggle-container:hover .secondary { opacity: 1; }

＆＃13;

<div class="hover-toggle-container">
  <div class="primary">dog url</div>
  <div class="secondary">Doggiecontent!</div>
</div>

<div class="hover-toggle-container">
  <div class="primary">Foo</div>
  <div class="secondary">Bar</div>
</div>

＆＃13;

请注意，此逻辑也是DRY，可用于多个.hover-toggle-container元素，如上面的演示所示。

在某些内容中保留鼠标悬停时，请替换内容

1 个答案: