Home > Web Front-end > JS Tutorial > A brief discussion on jQuery hover(over, out) event function

A brief discussion on jQuery hover(over, out) event function

高洛峰
Release: 2017-01-04 14:11:54
Original
1539 people have browsed it

hover(over, out) event function

When the mouse moves over a matching element, the specified first function will be triggered

When the mouse moves out of this element, the specified function will be triggered The second function

over(function): the function triggered when the mouse moves over the element

out(function): the function triggered when the mouse moves out of the element

<nav class="main-nav"> 
  <a href="/"><span>首页</span></a> 
  <a href="/about"><span>关于考试</span></a> 
  <a href="/exam"><span>报考指南</span></a> 
  <a href="/news"><span>考试情报</span></a> 
  <a href="/career"><span>考试与就业</span></a> 
  <a class="omega" href="/sitemap"><span>网站地图</span></a> 
</nav> 
<script> 
$(function(){
Copy after login
//鼠标移到与移出,移到元素时,添加当前元素样式,并且去掉当前页面的样式。鼠标移出时,去掉当前元素的样式,并且添加当前页面的样式 
  $(&#39;.main-nav&#39;).find(&#39;a&#39;).hover( 
    function(){$(this).addClass(&#39;cur&#39;);$(&#39;.main-nav&#39;).find(&#39;a[href="<?php echo "/".$path[1];?>"]&#39;).removeClass(&#39;cur&#39;);}, 
    function(){$(this).removeClass(&#39;cur&#39;);$(&#39;.main-nav&#39;).find(&#39;a[href="<?php echo "/".$path[1];?>"]&#39;).addClass(&#39;cur&#39;);} 
  ); 
  $(&#39;.main-nav&#39;).find(&#39;a[href="<?php echo "/".$path[1];?>"]&#39;).addClass(&#39;cur&#39;); //加载页面时就添加样式 
}); 
</script>
Copy after login

Get< ;a href="/">This element

$(".main-nav").find(&#39;a[href="/"]&#39;);
Copy after login

The above article briefly discussing the jQuery hover(over, out) event function is all the content shared by the editor. I hope it can To give you a reference, I also hope that everyone will support the PHP Chinese website.

For more articles related to the jQuery hover(over, out) event function, please pay attention to the PHP Chinese website!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template