鼠标退出时恢复功能

resume function on mouse out

本文关键字：功能 恢复 退出 鼠标      更新时间：2023-09-26

我正在使用javascript/jQuery处理一个页面，并且几乎完成了。我应该有旋转内容（功能"旋转内容"）和div，当相关按钮悬停在旋转内容的位置时，它们会显示在旋转内容的位置。我已经完成了所有这些，除了当我将鼠标悬停在按钮上时，所有div 内容都消失了，并且原始的旋转内容功能不会恢复。我需要实现一个函数，以便在用户悬停在按钮之外后恢复它。这是我的JS：

<script type="text/javascript">
var messages;
var curcontentindex = 0;
var prevcontentindex;
var futcontentindex;
var i;

function rotatecontent() {
messages.hide();
curcontentindex = (curcontentindex < messages.length - 1) ? curcontentindex + 1 : 0;
messages.get(curcontentindex).style.display = "block";
}

$(function() {
messages = $('.dyncontent').find('div');
i = setInterval(rotatecontent, 1000);

$('li').hover(
function () {
$(this).addClass("hover");
clearInterval(i); // when mouse is over object
},
function () {
$(this).removeClass("hover");
setInterval(rotatecontent, 1000); //when mouse is no longer over object
}
);
});


</script>

这是我的 HTML：

<div class="dyncontent">
<div id="div1">Be A Billiken </div>
<div id="div2" style="display:none">Be A Billiken 2</div>
<div id="div3" style="display:none">Be A Billiken 3</div>
<div id="div4" style="display:none">Be A Billiken 4</div>
<div id="div5" style="display:none">Be A Billiken 5</div>
</div>

<ul id="container" overflow:hidden>
<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div1').show());" onMouseOut=""><img     src="../Work/Images/BAB.com_web_link_10.jpg"  width="250" height="100" class="Bab-image"></a></li>

<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div2').show());" onMouseOut=""><img     src="../Work/Images/SLU_on_the_Road.jpg" class="sluotr-image">    </a></li>
<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div3').show());"     onMouseOut=""><img src="http://slu.edu/Images/graduate/Billiken_Blogs.jpg" class="blogs-    image"></a></li>
<li ><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div4').show());"     onMouseOut=""><img src="http://slu.edu/Images/graduate/SLU_Chat.jpg" class="chat-image">    </a></li>
<li><a href="#" onMouseOver="$('div.dyncontent').replaceWith($('#div5').show());"     onMouseOut=""><img src="http://slu.edu/Images/graduate/Viewbook_Button_2011.jpg"     class="view-image"></a>
</li>
</ul>

jQuery .hover()函数有一个特殊的结构，它允许您设置鼠标悬停在对象上后发生的情况，以及鼠标不再指向对象后发生的情况。

$(".class").hover(
  function () {
    $(this).addClass("hover"); // when mouse is over object
  },
  function () {
    $(this).removeClass("hover"); //when mouse is no longer over object
  }
);

保存原始设置，然后在"鼠标不悬停"部分中使用它们

相关文章：