zoukankan      html  css  js  c++  java
  • 解决:Map的area属性标签鼠标Hover可以给area加背景

    css的area标签是不支持hover的,只有a标签才支持。li标签在IE浏览器下才支持,所以采用jquery的mouseenter和mouseleave事件完成。首先讲jQuery对应的事件:
    1.mouseenter事件

    当鼠标指针穿过元素时,会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。

    与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件。

    参数

    fnFunctionV1.0

    在每一个匹配元素的mouseenter事件中绑定的处理函数。

    [data],fnString,FunctionV1.4.3

    data:mouseenter([Data], fn) 可传入data供函数fn处理。

    fn:在每一个匹配元素的mouseenter事件中绑定的处理函数。

    示例

    描述:

    当鼠标指针进入(穿过)元素时,改变元素的背景色:

    jQuery 代码:
    $("p").mouseenter(function(){
      $("p").css("background-color","yellow");
    });

    2.mousedown 事件

    当鼠标指针离开元素时,会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。

    与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何子元素,同样会触发 mouseout 事件。

    参数

    fnFunctionV1.0

    在每一个匹配元素的mouseleave事件中绑定的处理函数。

    [data],fnString,FunctionV1.4.3

    data:mouseleave([Data], fn) 可传入data供函数fn处理。

    fn:在每一个匹配元素的mouseleave事件中绑定的处理函数。

    示例

    描述:

    当鼠标指针离开元素时,改变元素的背景色::

    jQuery 代码:
    $("p").mouseleave(function(){
      $("p").css("background-color","#E9E9E4");
    });
    言归正传,下面就是解决Map的area属性标签鼠标Hover可以给area加背景的问题:

    示例

    html:

     <div class="region">
            <img src="static/images/region_city.png" usemap="#Map" class="region_button">
            <map name="Map" id="map">
              <area shape="rect" target="_blank" class="hotpoint shanghai" coords="0,0,173,166" href="enroll_shanghai.html">
              <area shape="rect" target="_blank" class="hotpoint nanjing" coords="246,0,414,166" href="enroll_nanjing.html">
            </map>
        </div>

    js:

    if($('.region_button').length){
            $('.hotpoint').unbind().bind('mouseenter',function(){
                if($(this).hasClass('shanghai')){
                    $('.region_button').attr('src','images/region_city_1.png');
                }else{
                    $('.region_button').attr('src','images/region_city_2.png');
                }
            }).bind('mouseleave',function(){
                $('.region_button').attr('src','images/region_city.png');
            });
        }

  • 相关阅读:
    [转载]Quartus ii 一些Warning/Eeror分析与解决
    [转载]MAC、IP头、TCP头、UDP头帧格式、详解
    [转载]关于晶振ppm
    20140919-FPGA-有效观察设计中的差分信号
    [转载]转一篇Systemverilog的一个牛人总结
    [转载]ISE中COE与MIF文件的联系与区别
    linux系统性能监控--I/O利用率
    linux系统性能监控--内存利用率
    linux系统性能监控--CPU利用率
    在linux系统中I/O 调度的选择
  • 原文地址:https://www.cnblogs.com/Better-Me/p/4260533.html
Copyright © 2011-2022 走看看