jQuery多个元素组合Hover事件

这里讲述jQuery多个元素组合Hover事件。

jQuery的hover事件只是针对单个HTML元素，例如：

$('#login').hover(fun2, fun2);

当鼠标进入#login元素时调用fun1函数，离开时则调用fun2函数，这种功能已能够满足绝大部分需求。

不过，有些时候我们希望当鼠标进入两个或多个元素“组合的区域”时触发fun1，离开他们时触发fun2，而在这些元素间移动鼠标并不触发任何事件。例如两个元素紧挨着的HTML元素。

当鼠标进入二者的“组合区”域时触发fun1，离开时触发fun2。也许会想到使用下面的方式：

$('#trigger, #drop'),hover(fun1, fun2);

这种方式并不能满足需求，因为从#trigger进入#drop时会依次触发fun2和fun1。要解决这个问题，一种比较简单的方式是更改HTML结构，实现方式如下：

<div id="container">

<div id="trigger"></div>

<div id="drop"></div>

</div>

$('#container').hover(fun1, fun2);

这样通过在父元素上绑定hover事件来实现此功能。

如常见下拉菜单：

<ul id="nav">

    <li></li>

    <li></li>

    <li id="droplist">

        <span>下拉菜单</span>

        <ul>

            <li>下拉项1</li>

            <li>下拉项2</li>

            <li>下拉项3</li>

        <ul>

    </li>

    <li></li>

</ul>

实现的JavaScrip程序也是非常简单：

$('#droplist').hover(function(){

    $(this).find('ul').show();

}, function(){ $(this).find('ul').hide(); });|#|#|

JS jQuery隐藏和显示div的几种方式：

方式1：隐藏后释放占用的页面空间
通过设置display属性可以使div隐藏后释放占用的页面空间.

style="display: none;"

document.getElementById("demo").style.display="none";//隐藏

document.getElementById("demo").style.display="";//显示

方式2：隐藏后仍占有页面空间，显示空白

div的visibility可以控制div的显示和隐藏，但是隐藏后页面显示空白.

style="visibility: none;"

document.getElementById("demo").style.visibility="hidden";//隐藏

document.getElementById("demo").style.visibility="visible";//显示

用div.style.display="none"隐藏会引起，div里面的东西休眠，里面的事件就不响应了。

jQuery隐藏和显示div的方式

1、$("#demo").attr("style","display:none;");//隐藏div

   $("#demo").attr("style","display:block;");//显示div

2、$("#demo").css("display","none");//隐藏div

   $("#demo").css("display","block");//显示div

3、$("#demo").hide();//隐藏div

   $("#demo").show();//显示div

4、$("#demo").toggle(//动态显示和隐藏

         function () {

              $(this).attr("style","display:none;");//隐藏div

         },

         function () {   

              $(this).attr("style","display:block;");//显示div

         }

      );

       <div id="demo"></div>

$("#demo").show()表示display:block,

$("#demo").hide()表示display:none;

欢迎阅读、分享，转载和使用请注明出处，文章来自三里河之光-风、物、情