在将鼠标悬停在某些内容上的同时，替换内容答案

【问题标题】：While keeping mouse-over in some content, replace the content在将鼠标悬停在某些内容上的同时，替换内容
【发布时间】：2018-03-28 09:02:17
【问题描述】：

在悬停时内容会发生变化，但在我移除悬停时不会替换旧内容。

$('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>

有人知道路吗？

【问题讨论】：

jsfiddle.net/NeaWm/914 检查这个小提琴链接

标签： jquery html css mouseover

【解决方案1】：

首先，jQuery 1.5.2 已经过时了 7 年多。您应该立即升级它，最好升级到 v3 分支上的东西。

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

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

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

.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; }

<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>

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

【讨论】：