<legend id='Kz8NR'><style id='Kz8NR'><dir id='Kz8NR'><q id='Kz8NR'></q></dir></style></legend>

      <bdo id='Kz8NR'></bdo><ul id='Kz8NR'></ul>

    <small id='Kz8NR'></small><noframes id='Kz8NR'>

    <tfoot id='Kz8NR'></tfoot>
  1. <i id='Kz8NR'><tr id='Kz8NR'><dt id='Kz8NR'><q id='Kz8NR'><span id='Kz8NR'><b id='Kz8NR'><form id='Kz8NR'><ins id='Kz8NR'></ins><ul id='Kz8NR'></ul><sub id='Kz8NR'></sub></form><legend id='Kz8NR'></legend><bdo id='Kz8NR'><pre id='Kz8NR'><center id='Kz8NR'></center></pre></bdo></b><th id='Kz8NR'></th></span></q></dt></tr></i><div id='Kz8NR'><tfoot id='Kz8NR'></tfoot><dl id='Kz8NR'><fieldset id='Kz8NR'></fieldset></dl></div>

    1. 将鼠标悬停在 Raphaeljs 中的一组元素上

      Hovering over a set of elements in Raphaeljs(将鼠标悬停在 Raphaeljs 中的一组元素上)

        <legend id='wcOem'><style id='wcOem'><dir id='wcOem'><q id='wcOem'></q></dir></style></legend>
      1. <tfoot id='wcOem'></tfoot>

        <small id='wcOem'></small><noframes id='wcOem'>

        • <bdo id='wcOem'></bdo><ul id='wcOem'></ul>
          <i id='wcOem'><tr id='wcOem'><dt id='wcOem'><q id='wcOem'><span id='wcOem'><b id='wcOem'><form id='wcOem'><ins id='wcOem'></ins><ul id='wcOem'></ul><sub id='wcOem'></sub></form><legend id='wcOem'></legend><bdo id='wcOem'><pre id='wcOem'><center id='wcOem'></center></pre></bdo></b><th id='wcOem'></th></span></q></dt></tr></i><div id='wcOem'><tfoot id='wcOem'></tfoot><dl id='wcOem'><fieldset id='wcOem'></fieldset></dl></div>

                  <tbody id='wcOem'></tbody>

                本文介绍了将鼠标悬停在 Raphaeljs 中的一组元素上的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                问题描述

                我有一个只包含一个矩形的集合.

                I have a set that only contains a rectangle.

                var hoverTrigger = this.paper.set();
                var outline = this.paper.rect();
                outline.attr({
                ...
                hoverTrigger.push(outline)
                this.sprite.push(hoverTrigger);
                

                鼠标悬停时,矩形应该会扩大,并添加一些链接,鼠标关闭后,链接会消失,矩形又变小了.

                Upon hover, the rectangle is supposed to expand, and some links are added to it, and upon mouse off, the links disappear and the rectangle becomes small again.

                hoverTrigger.hover(function () {
                  var link = this.paper.text();
                  hoverTrigger.push(link);
                  outline.animate({
                  ...
                }, function() {
                  link.remove();
                  outline.animate({
                  ...
                });
                

                但是,悬停功能似乎是单独应用于集合中的每个项目,而不是整个集合,因为当您将鼠标悬停在链接上时,悬停功能会触发并且链接消失.有时,该框会快速连续地悬停在事件上和悬停在事件上,并发出声响.

                However, it seems like the hover function is being applied to each item in the set individually, and not the whole set, because when you go to mouse over a link, the hover off function fires and the link disappears. Sometimes the box gets hover on and hover off events in quick succession and spazzes.

                有没有一种方法可以将悬停应用到一组事物上,以便在该组中的两个事物之间进行鼠标悬停不会触发悬停?

                Is there a way to apply a hover to a set of things, so that mousing between two things in the set doesn't trigger hover off?

                推荐答案

                最近我自己也遇到了这个限制,我决定为 Raphael 编写一个名为 hoverInBounds 的小扩展来解决它.

                Having faced this limitation myself recently, I decided to write a small extension to Raphael called hoverInBounds that resolves it.

                简单地说,一旦鼠标进入元素,我们会跟踪它何时实际移动到其边界之外 - 然后执行悬停功能,而不是之前.

                Simply, once the mouse enters the element we keep track of when it actually moves outside its bounds - executing the hover out function then, not before.

                演示:http://jsfiddle.net/amustill/Bh276/1

                Raphael.el.hoverInBounds = function(inFunc, outFunc) {
                    var inBounds = false;
                
                    // Mouseover function. Only execute if `inBounds` is false.
                    this.mouseover(function() {
                        if (!inBounds) {
                            inBounds = true;
                            inFunc.call(this);
                        }
                    });
                
                    // Mouseout function
                    this.mouseout(function(e) {
                        var x = e.offsetX || e.clientX,
                            y = e.offsetY || e.clientY;
                
                        // Return `false` if we're still inside the element's bounds
                        if (this.isPointInside(x, y)) return false;
                
                        inBounds = false;
                        outFunc.call(this);
                    });
                
                    return this;
                }
                

                在创建 Raphael 纸对象之前放置上述代码块.

                Place the above block of code before you create your Raphael paper object.

                这篇关于将鼠标悬停在 Raphaeljs 中的一组元素上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

                相关文档推荐

                Move link image 5px up on hover(悬停时将链接图像向上移动 5px)
                How do I inspect CSS pseudo classes with firebug?(如何使用 firebug 检查 CSS 伪类?)
                Why doesn#39;t CSS hover work on table rows when the cells inside the rows have class names?(当行内的单元格具有类名时,为什么 CSS 悬停在表格行上不起作用?)
                How to apply a CSS class on hover to dynamically generated submit buttons?(如何在悬停时将 CSS 类应用于动态生成的提交按钮?)
                Differences between CSS3 :hover and :focus?(CSS3 :hover 和 :focus 的区别?)
                div hover background-color change?(div 悬停背景颜色变化?)
                • <i id='7tNGS'><tr id='7tNGS'><dt id='7tNGS'><q id='7tNGS'><span id='7tNGS'><b id='7tNGS'><form id='7tNGS'><ins id='7tNGS'></ins><ul id='7tNGS'></ul><sub id='7tNGS'></sub></form><legend id='7tNGS'></legend><bdo id='7tNGS'><pre id='7tNGS'><center id='7tNGS'></center></pre></bdo></b><th id='7tNGS'></th></span></q></dt></tr></i><div id='7tNGS'><tfoot id='7tNGS'></tfoot><dl id='7tNGS'><fieldset id='7tNGS'></fieldset></dl></div>
                • <tfoot id='7tNGS'></tfoot>
                    <tbody id='7tNGS'></tbody>

                    <legend id='7tNGS'><style id='7tNGS'><dir id='7tNGS'><q id='7tNGS'></q></dir></style></legend>

                        <bdo id='7tNGS'></bdo><ul id='7tNGS'></ul>

                          <small id='7tNGS'></small><noframes id='7tNGS'>