带有悬停的jquery仅触发一次问题

Question

我想使用鼠标悬停来控制按钮的天气显示或隐藏（当鼠标悬停在按钮上时，显示按钮，当鼠标悬停在按钮上时隐藏按钮），但是，如果我将鼠标光标移至第二个按钮，它只会执行一次时间，它将不再显示。bellow是jsfiddle中的代码

<div class="cell code_cell rendered selected" tabindex="2"><div class="input"><div class="prompt_container"><div class="prompt input_prompt"><bdi>In</bdi>&nbsp;[1]:</div><div class="run_this_cell" title="Run this cell"><i class="fa-step-forward fa"></i></div></div><div class="inner_cell"><div class="ctb_hideshow"><div class="celltoolbar"></div></div><div class="input_area" aria-label="Edit code here"><div class="CodeMirror cm-s-ipython"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 5.59375px; left: 5.59375px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-vscrollbar" cm-not-content="true"><div style="min-width: 1px; height: 0px;"></div></div><div class="CodeMirror-hscrollbar" cm-not-content="true"><div style="height: 100%; min-height: 1px; width: 0px;"></div></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 0px; min-width: 99.5938px; margin-bottom: -17px; border-right-width: 13px; min-height: 28px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-cursors"><div class="CodeMirror-cursor" style="left: 5.59375px; top: 0px; height: 16.6667px;">&nbsp;</div></div><div class="CodeMirror-code" role="presentation"><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-builtin">print</span>(<span class="cm-string">"zzzz"</span>)</span></pre></div></div></div></div></div><div style="position: absolute; height: 13px; width: 1px; border-bottom: 0px solid transparent; top: 28px;"></div><div class="CodeMirror-gutters" style="display: none; height: 41px;"></div></div></div></div></div></div><div class="output_wrapper"><div class="out_prompt_overlay prompt" title="点击展开输出; 双击隐藏"></div><div class="output"><div class="output_area"><div class="run_this_cell"></div><div class="prompt"></div><div class="output_subarea output_text output_stream output_stdout"><pre>zzzz

。 。 。

$(".code_cell").each(function(i,e){if ($(e).children("input[name='submit_add']").length == 0){$( '<input id="sa'+i.toString()+'" style="margin:2px;padding:2px;position:absolute;right:0;top:0;z-index:1000;" type="button" name="submit_add" value="＋" />').insertBefore($(e).children()[0])}})


$("#sa0").hover(function(){$("#sa0").css("visibility",'');console.log("show");},function(){$("#sa0").css("visibility",'hidden');console.log("hide")});

HERE是在线完整的演示代码jsfiddle

Answer 1

而不是使用.css()，请看一下toggle()

工作片段：

$("#sa0").hover(function() {
  $(this).toggle('slow');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sa0">Hover me!</div>

正在处理您的代码：https://jsfiddle.net/1nhq8pd6/1/