当按下鼠标按钮时，悬停样式无法应用 [英] hover style can not apply when press mouse button in chrome

查看：100
本文介绍了当按下鼠标按钮时，悬停样式无法应用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所有：

[UPDATE] 我找到了另一种实现此方法的方法，而不是解决方案，但只是一个可行的技巧：
使用mousedown作为一个事件触发器（因为我需要一个拖动动作，所以应该有一个mousedown事件），里面，将mouseover事件绑定到该范围（我不知道为什么，但是在mousedown内部绑定鼠标悬停使用鼠标悬停工作跨度），给它一个改变背景颜色的新类;



我在Chrome 40上遇到的问题是：

 我设置了一个样式：
 
 span {
 background-color：red; 
} 
 span：hover {
 background-color：blue; 
} 
 
 
< span>测试区域< / span>

当鼠标悬停时，鼠标悬停，背景颜色不会改变


已在此解决，但未发布解决方案：
https://code.google.com/p/chromium/issues/detail?id=122746




我测试IE11 Firefox35，他们都工作得很好。只有Chrome 40无法正常工作：（b / b）

任何人都可以帮助使样式适用，或者提供一种方法来触发在该范围内的鼠标悬停 strong>（我想要做的就是拖动它，而backgroundcolor改变表明拖动已经超过了目标区域。）？Thanks！

解决方案

有趣的铬错误！直到我提出你的问题，我才注意到它。这让我想到FF是如何处理这个事件的。



设计一个简单的代码片段来跟踪悬停和点击事件触发的事件。

你可以找到 snippet fiddle here 。



现在在小提琴中，如果您删除最后一段中的注释， / b> 

  $（document）.mousemove（function（）{
 console.clear（）; 
 console。日志（'histed element now：'+ hoveredElement +' -  - &  - '+'现在点击元素：'+ clickedElement）; 
}）;

然后评论下面的部分，



<$ （）{$ b $（this）.addClass（'jsHover'）;
}）。mouseleave（function（）{
$（this）.removeClass（'jsHover'）;
}）;

现在代码复制您提到的问题（在chrome和FF中尝试它我能够复制如果你关注各个浏览器的控制台，我的发现是，当你点击 span之外的 / code>元素，然后拖动鼠标进入元素，这就是发生了什么...



在Chrome中 >


  1. 只需将鼠标悬停在第一个span元素之外而不输入span范围：控制台输出

     现在悬停元素：BODY  - & - 点击元素现在：undefined


  2. 现在点击鼠标左键（mousedown和mouseup ）：控制台输出

     现在悬停元素：BODY  - & - 单击元素现在：BODY


  3. 现在只需将鼠标移动一下即可：控制台输出

     现在盘旋元素：BODY  - & - 点击元素：BODY


现在让我们在Firefox中做同样的事情吧？ 

 现在悬停的元素：BODY  - & - 点击元素现在：undefined


  • 现在点击鼠标左键（mousedown和mouseup ）：控制台输出

     现在悬停元素：BODY  - & - 点击元素现在：undefined

    请注意，未定义现在。将它与chrome的结果进行比较


  • 现在只需将鼠标移动一下即可： 

      histed元素现在：BODY  - & - 点击元素：BODY


    • **现在进行下一组测试**


    1. 现在点击第一个span元素外面，并且不释放鼠标拖动它在span元素内然后释放。释放后请勿移动鼠标。以chrome控制台输出

       现在悬停元素：SPAN  - & - 点击元素：BODY

      FF的控制台输出

      现在悬停元素：SPAN - & - 现在单击的元素：undefined




      2. 注意这里输出的不同。

      现在，如果你问我为什么浏览器之间发生这种情况，我不知道。我只能说，：hover 的伪类没有在chrome中触发，而是在FF中触发。



      那么你问的解决方案是什么？



      这是我的解决方法。



      发生手动添加悬停类。这使得chrome动态添加类，而在FF中它已经处于一种幸福的状态;）

      所以现在在小提琴再次取消注释这段代码... 

        $（hoveredElement）.mouseenter（function（）{
       $（this）.addClass（'jsHover'）; 
      }）。mouseleave（function（）{
       $（this）.removeClass （'jsHover'）; 
      }）;

      并且注释最后一部分，如果您愿意，可以输出控制台。



      当发生触发我们小问题的特定事件集合时，它会将一个jsHover类（它与css中的常规：hover伪类一起定义）添加到span元素。



      完整的代码片段在这里...



      $（document）.ready（function（）{var hoveredElement; var clickedElement; $（document）.mousemove（function（event）{hoveredElement = event.target.nodeName; $（hoveredElement）.mouseenter（function（）{$（ this）.addClass（'jsHover'）;}）。mouseleave（function（）{$（this）.removeClass（'jsHover'）;}）; //console.log('hovered element now：'，hoveredElement）;返回hoveredElement; }）; $（document）.click（function（event）{clickedElement = event.target.nodeName; //console.log('clicked element now：'，clickedElement）; return clickedElement;}）; / * $（document）.mousemove（function（）{console.clear（）; console.log（'histed element now：'+ hoveredElement +' - & - '+'nowed：'+ clickedElement）; }）;

      .page {height：100％ ;宽度：100％; / * background：rgba（12，132，49，0.3）; * /} div {height：200px;宽度：250像素; / * background：pink; * /} span {/ * background-color：cyan; * /} span：hover，span.jsHover {background-color：blue;白颜色;字体重量：粗体; } .activeElement {background：#bfbfbf; } 

       < script src =https：// ajax .googleapis.com / ajax / libs / jquery / 1.11.0 / jquery.min.js>< / script>< span>页面div span元素< / span>< br />< hr />< div class =page> < DIV> < span>里面pade div span元素< / span> < p为H. wjhjhewh< / p为H. < / div>< / div>

      。 快乐编码

      All:

      [UPDATE] I find another way to implement this, not solution, but just a working trick: Use mousedown as a event trigger(because I need a drag action, so there should be a mousedown event anyway), inside that, bind mouseover event to that span(I do not know why, but bind mouseover inside mousedown can make mouseover work on span), give it a new class which change the background color;

      The problem I had with Chrome 40 is:

      I set a style:

span {
    background-color:red;
}
span:hover {
    background-color:blue;
}


<span>TEST AREA</span>

      When I mousedown then mouseover, the background-color not changed

      It has been addressed here with no solution posted: https://code.google.com/p/chromium/issues/detail?id=122746

      I test IE11 Firefox35, they all work very well. Only Chrome 40 not work :(

      Could anyone help to make the style apply or give a way to trigger mouseover on that span with drag action being taken( I want to do is drag something over it and the backgroundcolor change indicates the drag is over the target area.)? Thanks!

      解决方案

      Interesting chrome bug! I had not noticed it till I came upon your question. This got me thinking how FF was handling this event.

      So I went upon devising a simple code snippet which tracks the event at which the hover and click events trigger.

      You can find this snippet fiddle here.

      Now in the fiddle , if you remove the comments in the last segment,

      $(document).mousemove(function () {
            console.clear();
            console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement);                
    });

      and then comment the section below ,

      $(hoveredElement).mouseenter(function () {
            $(this).addClass('jsHover');
        }).mouseleave(function () {
            $(this).removeClass('jsHover');
        });

      Now the code replicates the issue that you mentioned ( try it in chrome and FF I was able to replicate in chrome 41).

      If you pay attention to the console of the respective browsers, my findings were that when you click outside of the span element and then drag the mouse to enter the element, this is what happens...

      In Chrome

      1. Just mouse hover outside the first span element without entering the span space : Console output

        hovered element now: BODY -- & -- clicked element now: undefined

      2. Now click the left button in mouse( mousedown and mouseup) : console output

        hovered element now: BODY -- & -- clicked element now: BODY

      3. Now just move the mouse just a hair : console output

        hovered element now: BODY -- & -- clicked element now: BODY

      Now lets do the same thing in Firefox, shall we?

      1. Just mouse hover outside the first span element without entering the span space : Console output

        hovered element now: BODY -- & -- clicked element now: undefined

      2. Now click the left button in mouse( mousedown and mouseup) : console output

        hovered element now: BODY -- & -- clicked element now: undefined

        Notice it says undefined for clicked element now. compare it with chrome's result

      3. Now just move the mouse just a hair : console output

        hovered element now: BODY -- & -- clicked element now: BODY

      **Now next set of tests **

      1. Now click outside the first span element and without releasing the mouse drag it to within the span element and then release. Do not move the mouse after release. Console output in chrome

        hovered element now: SPAN -- & -- clicked element now: BODY

        Console output for FF

        hovered element now: SPAN -- & -- clicked element now: undefined

      Notice the difference in outputs here as well.

      Now if you ask me why that is happening between the browsers, that I do not know. All I can say that the pseudo class of :hover is not fired in chrome but in FF it fires.

      So what is the solution you ask?

      Well here is my workaround.

      Simply for that event when it occurs add the hover class manually. this makes chrome add the class dynamically whereas in FF it is already in a blissful state ;)

      So now in the fiddle again uncomment the piece of code...

      $(hoveredElement).mouseenter(function () {
                $(this).addClass('jsHover');
            }).mouseleave(function () {
                $(this).removeClass('jsHover');
            });

      and comment the last section which does the console output if you so wish.

      What this does is adds a jsHover class (which is defined along with the regular :hover pseudo class in css) to the span element when the particular set of event which triggers our little issue, occurs.

      The complete Code Snippet is here...

      $(document).ready(function () {
    var hoveredElement;
    var clickedElement;
    $(document).mousemove(function (event) {
        hoveredElement = event.target.nodeName;

        $(hoveredElement).mouseenter(function () {
            $(this).addClass('jsHover');
        }).mouseleave(function () {
            $(this).removeClass('jsHover');
        });

        //console.log('hovered element now: ', hoveredElement);
        return hoveredElement;
    });
    $(document).click(function (event) {
        clickedElement = event.target.nodeName;
        //console.log('clicked element now: ', clickedElement);
        return clickedElement;
    });
    /*
            $(document).mousemove(function () {
                console.clear();
                console.log('hovered element now: '+hoveredElement+ ' -- & -- '+'clicked element now: '+ clickedElement);                
            });
            */
});

              .page {
            height:100%;
            width:100%;
            /*background:rgba(12, 132, 49, 0.3);*/
        }
        div {
            height:200px;
            width:250px;
            /*background:pink;*/
        }
        span {
            /*background-color:cyan;*/
        }
        span:hover, span.jsHover {
            background-color:blue;
            color:white;
            font-weight:bold;
        }
        .activeElement {
            background:#bfbfbf;
        }

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<span>before page div span element</span>

<br/>
<hr/>
<div class="page">
    <div> <span>inside pade div span element </span>

        <p>wjhjhewh</p>
    </div>
</div>

      Hope this helps. Happy coding

      这篇关于当按下鼠标按钮时，悬停样式无法应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

    查看全文
    相关文章
    前端开发最新文章
    热门教程
    热门工具
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆