使用转换jQuery更改悬停时的文本

试图做到这一点：我有多个标题，每个标题都有不同的文本。当我将鼠标悬停在一个标题上时，文本会随着“幻灯片”动画相应地发生变化（每个标题的所有文本都不同）

我已经到了悬停可以正常工作的地步，但是当我尝试添加一个简单的转换时，功能中断了

HTML代码：

<h1 id="mainText1">Header 1.</h1><span class="mainText1">Text 1.</span>
<h1 id="mainText2">Header 2.</h1><span class="mainText2">Text 2.</span>
<h1 id="mainText3">Header 3.</h1><span class="mainText3">Text 3.</span>
<h1 id="mainText4">Header 4.</h1><span class="mainText4">Text 4.</span>

如果删除第7行中的“慢速”按钮，则可以正常工作。我也尝试过类似于

$(toShow).show().slideDown('slow');

。。但也没有运气。我也在寻找一个更清洁的解决方案，而不是张贴一个。我的jQuery太基础了，无法判断是否可以用其他方式做得更好。提前谢谢

编辑：我想我没有说清楚，因为我看到了类似的解决方案。h1必须在悬停时消失。我更新了JS代码。这段代码按照我的预期工作，但它不包含“幻灯片”动画。当我尝试将代码放入幻灯片时（如.slideDown（'show'），它无法按预期工作）。有办法做到这一点吗

更新小提琴：

---

前面的提琴：（我试着放“慢”）和功能中断。

你在找这个吗

HTML

<div class="topic">
  <h1 id="mainText1">Header 1.</h1>
  <span class="mainText1">Text 1.</span></div>
<div class="topic">
  <h1 id="mainText2">Header 2.</h1>
  <span class="mainText2">Text 1.</span></div>
<div class="topic">
  <h1 id="mainText3">Header 3.</h1>
  <span class="mainText3">Text 1.</span></div>
<div class="topic">
  <h1 id="mainText4">Header 4.</h1>
  <span class="mainText4">Text 1.</span></div>

脚本

$('.topic').mouseenter(function(){
    $('.topic').find('span.'+$(this).find('h1').attr('id')).show();
    $(this).find('h1').hide();
}).mouseleave(function(){
    $('.topic').find('span.'+$(this).find('h1').attr('id')).hide();
    $(this).find('h1').show();
});

---

如果不隐藏H1，它会工作

浏览器陷入了困境，因为在H1上方悬停时，它会隐藏H1，触发鼠标退出事件，然后再次显示H1并隐藏跨度

---

注意-

span

实际上应该被一个块级元素（如

p

）替换，以确保语义正确。

OK-在调用

slideDown

时删除'slow'关键字的原因是它使转换瞬间生效。当您添加slow关键字时，幻灯片会花费一些时间——但是，javascript不会等待转换后再转到下一行。因此，在“show”正在进行时，“slideDown”仍在进行中，这使得布局到处跳跃

另一个问题是，您的“悬停”事件仅在“h1”上，这意味着如果用户将鼠标悬停在悬停显示的文本上，则将取消悬停，然后隐藏文本。。。它将h1拉回到光标下，因此事件再次激发，等等

这里有一个不同的解决方案：

我不会为此使用javascript，我只会使用CSS。首先，您需要更改HTML的结构，以便h1和显示的文本在包含元素中是同级的（我使用了

，但您可能希望使用

或其他块元素）：

这是基本的显示/隐藏行为，不需要javascript。如果你想要转换，你也可以这样做，只要你事先知道“主文本”的高度。如果是，请将CSS更改为：

.toggle-section h1,
.toggle-section .main-text {
  -moz-transition: height 400ms;
  -o-transition: height 400ms;
  -webkit-transition: height 400ms;
  transition: height 400ms;
  overflow: hidden;
  height: 1.2em;
}
.toggle-section .main-text {
  height: 0;
}

.toggle-section:hover h1, .toggle-section:focus h1 {
  height: 0;
}
.toggle-section:hover .main-text, .toggle-section:focus .main-text {
  height: 1.2em;
}

然后，当您悬停/聚焦该元素时，主文本的高度将扩展到1.2米，超过400毫秒

这样做有几个好处：

• 它可以在没有javascript的情况下工作——如果您仍然是 从javascript/jQuery开始：如果你无意中弄坏了什么东西， 你的开关还可以用

• 它更快：CSS通常在Javascript启动之前就准备好了 你的页面

• 它更整洁-它不会将显示内容混合到Javascript中

---

在这样的设置中需要注意一件事：Hover在手机或触摸设备上不起作用（无论您是否触摸屏幕）。您应该为这些设备提供另一个选项。

主要问题在于您隐藏了所覆盖的元素。 下面是一段隐藏元素的代码

<h1 id="mainText1">
    <span class="mainText1_main">Header 1.</span>
    <span class="mainText1">Text 1.</span>
</h1>

function(evt) {
    evt.preventDefault();
    var id = $(this).attr('id');
    var toHide = $("." + id + "_main");
    var toShow = $("." + id);
    $(toHide).hide();
    $(toShow).show('slow');
}

标题1。
案文1。
功能（evt）{
evt.preventDefault（）；
var id=$（this.attr（'id'）；
var-toHide=$（“+id+”）；
var toShow=$（“+id”）；
$（toHide.hide（）；
$（toShow.show（'slow'）；
}

尝试使用

鼠标悬停

而不是

悬停

events@blgt：jQuery的“hover”只是在一次调用中定义mouseover和mouseleave的快捷方式-在引擎盖下，它们是相同的。@Beejamin对于问题的描述，

mouseleave

似乎没有必要。我不知道，所有的版本都显示需要在休假时恢复显示，有没有办法只用鼠标盖就可以恢复显示？没有！我悬停在上面的标题文本必须消失/隐藏。您可以设置样式，使文本看起来不像h1，或者将所有内容包装在div上，然后使用h1和span（实际上是最好的）。只需记住你悬停在哪个元素上。很棒-css和html唯一的解决方案-用小提琴或代码笔扔掉它？这是固定的-另外，添加了隐藏悬停时h1的行为。哥们，这太棒了！谢谢。我从来没有想过这是可能的CSS。投票认为这是最好的答案。再次感谢：）另外，谢谢你提醒我悬停的局限性。文本并不重要，因此不会出现在手机上：）然后尝试在h1中放置两个跨距。让代码隐藏第一个跨距，并在悬停时显示第二个跨距，这样h1就不会失去焦点。我还建议在隐藏中添加与在显示中相同的过渡。或者，如果您需要对每个元素使用不同的样式，请将它们包装在一个DIV中，并将鼠标悬停在该DIV上。

$(document).ready(function() {
    $("h1").hover(function(evt) {
        evt.preventDefault();
        var id = $(this).attr('id');
        var toShow = $("." + id);
        $(toShow).show('slow');
    }, function () {
         var id2 = $(this).attr('id');
        var toHide = $("." + id2);
        $(toHide).hide();
    });
});

<div class="toggle-section">
  <h1>Heading 1</h1>
  <p class="main-text">Main text 1</p>
</div>
<div class="toggle-section">
  <h1>Heading 2</h1>
  <p class="main-text">Main text 2</p>
</div>
<div class="toggle-section">
  <h1>Heading 3</h1>
  <p class="main-text">Main text 3</p>
</div>
<div class="toggle-section">
  <h1>Heading 4</h1>
  <p class="main-text">Main text 4</p>
</div>

.toggle-section .main-text {
  display: none;
}

.toggle-section:hover h1,
.toggle-section:focus h1 {
  display: none;
}

.toggle-section:hover .main-text,
.toggle-section:focus .main-text {
  display: block;
}

.toggle-section h1,
.toggle-section .main-text {
  -moz-transition: height 400ms;
  -o-transition: height 400ms;
  -webkit-transition: height 400ms;
  transition: height 400ms;
  overflow: hidden;
  height: 1.2em;
}
.toggle-section .main-text {
  height: 0;
}

.toggle-section:hover h1, .toggle-section:focus h1 {
  height: 0;
}
.toggle-section:hover .main-text, .toggle-section:focus .main-text {
  height: 1.2em;
}

<h1 id="mainText1">
    <span class="mainText1_main">Header 1.</span>
    <span class="mainText1">Text 1.</span>
</h1>

function(evt) {
    evt.preventDefault();
    var id = $(this).attr('id');
    var toHide = $("." + id + "_main");
    var toShow = $("." + id);
    $(toHide).hide();
    $(toShow).show('slow');
}