鼠标悬浮事件 -jQuery hover()方法

body内容

<div class="title-01"><span class="name">机构账户统计</span></div>

这里写图片描述
js代码

    <script type="text/javascript">
    var differentindex = 999;

    $(document).ready(function(){

        $(".name").hover(function() {
            openMsg();
        }, function() {
            layer.close(differentindex);
        });
    });

    function openMsg() {
        differentindex = layer.tips('点击分类内容项,可查看下一级机构账户统计情况', '.name', {
          tips: [1, '#3595CC'],
          time: 30000
        });
    }
    </script>

这就是jQuery hover()事件,鼠标悬浮机构账户统计上就会出现下面的提示信息,觉得挺不错的,js代码也很简单,分享给大家。

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要给eachart图表中的每一根柱子添加鼠标悬浮事件,需要先通过eachart提供的API获取到图表实例,然后再对柱子添加对应的事件。 首先要获取图表实例,可以使用eachart提供的echarts.init()方法初始化一个DOM容器并返回图表实例。例如: ```javascript var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); ``` 然后,可以使用图表实例的getOption()方法获取当前配置项,进而获取到每一根柱子的相关属性,比如名称、值、样式等,例如: ```javascript var option = myChart.getOption(); // 获取第一根柱子的名称 var barName = option.series[0].data[0].name; // 获取第一根柱子的值 var barValue = option.series[0].data[0].value; // 获取第一根柱子的样式 var barStyle = option.series[0].itemStyle; ``` 接下来,可以使用jQuery等库给每一根柱子添加鼠标悬浮事件,例如: ```javascript // 给第一根柱子添加悬浮事件 $('#chart .bar:nth-child(1)').hover(function() { // 鼠标悬浮时的处理逻辑 console.log('hover on bar 1'); }, function() { // 鼠标离开时的处理逻辑 console.log('leave from bar 1'); }); ``` 如果需要对所有柱子添加相同的悬浮事件,可以用循环遍历每一根柱子,并使用jQuery的each()方法来实现: ```javascript $('#chart .bar').each(function(index, bar) { $(bar).hover(function() { console.log('hover on bar ' + (index + 1)); }, function() { console.log('leave from bar ' + (index + 1)); }); }); ``` 以上就是给eachart图表中的每一根柱子添加鼠标悬浮事件的步骤和简单示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值