在 chrome 中按下鼠标按钮时无法应用悬停样式

2022-01-22 00:00:00 google-chrome hover css mouseover mousedown

全部:

[UPDATE]我找到了另一种实现方式，不是解决方案，而是一个有效的技巧:使用 mousedown 作为事件触发器(因为我需要一个拖动动作，所以无论如何应该有一个 mousedown 事件)，在其中，将 mouseover 事件绑定到该跨度(我不知道为什么，但是在 mousedown 内绑定 mouseover 可以使mouseover 在 span 上工作)，给它一个改变背景颜色的新类；

Chrome 40 遇到的问题是:

我设置了一个样式:跨度 {背景颜色:红色；}跨度:悬停{背景颜色:蓝色；}<span>测试区域</span>

当我鼠标按下然后鼠标悬停时，背景颜色没有改变

<块引用>

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

我测试了 IE11 Firefox35，它们都运行得很好.只有 Chrome 40 不工作:(

任何人都可以帮助使样式应用或提供一种在该跨度上触发鼠标悬停的方法正在进行拖动操作(我想做的是在其上拖动一些东西，背景颜色的变化表示拖动是否在目标区域上方.)?谢谢！

解决方案

有趣的 chrome 错误！直到我遇到你的问题，我才注意到它.这让我想到了 FF 是如何处理这个事件的.

因此，我开始设计一个简单的代码片段，用于跟踪触发悬停和点击事件的事件.

你可以在这里找到这个片段小提琴.

现在在小提琴中，如果您删除最后一段中的评论，

$(document).mousemove(function () {控制台.clear();console.log('现在悬停的元素:'+hoveredElement+' -- & -- '+'现在点击的元素:'+ clickedElement);});

然后评论下面的部分，

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

现在代码复制了您提到的问题(在 chrome 中尝试它，FF 我能够在 chrome 41 中复制).

如果您注意各个浏览器的控制台，我的发现是，当您单击 span 元素外部然后拖动鼠标进入该元素时，会发生这种情况...

在 Chrome 中

鼠标悬停在第一个 span 元素外，不进入 span 空间:控制台输出
```
现在悬停的元素:BODY -- &-- 现在点击的元素:未定义
```
现在单击鼠标左键(mousedown 和 mouseup):控制台输出
```
现在悬停的元素:BODY -- &-- 现在点击的元素:BODY
```

现在只需移动鼠标一点点:控制台输出

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

现在让我们在 Firefox 中做同样的事情，好吗?

鼠标悬停在第一个 span 元素外，不进入 span 空间:控制台输出
```
现在悬停的元素:BODY -- &-- 现在点击的元素:未定义
```
现在单击鼠标左键(mousedown 和 mouseup):控制台输出
```
现在悬停的元素:BODY -- &-- 现在点击的元素:未定义
```
请注意，现在点击的元素显示为 undefined.将其与 chrome 的结果进行比较

现在只需移动鼠标一点点:控制台输出

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

**现在是下一组测试**

现在单击第一个 span 元素的外部，不释放鼠标，将其拖动到 span 元素内，然后释放.释放后不要移动鼠标.chrome中的控制台输出
```
现在悬停的元素:SPAN -- &-- 现在点击的元素:BODY
```
FF 的控制台输出
现在悬停的元素:SPAN -- &-- 现在点击的元素:未定义

请注意此处的输出差异.

现在，如果您问我为什么会在浏览器之间发生这种情况，我不知道.我只能说 :hover 的伪类不会在 chrome 中触发，但在 FF 中会触发.

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

这是我的解决方法.

仅在该事件发生时手动添加悬停类.这使得 chrome 动态添加类，而在 FF 中它已经处于幸福状态;)

所以现在在 fiddle 中再次取消注释这段代码...

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

如果您愿意，还可以评论控制台输出的最后一部分.

它的作用是在触发我们的小问题的特定事件集发生时，向 span 元素添加一个 jsHover 类(与 css 中的常规 :hover 伪类一起定义).

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

$(document).ready(function () {变量悬停元素；var clickedElement;$(文档).mousemove(函数(事件){hoveredElement = event.target.nodeName;$(hoveredElement).mouseenter(function () {$(this).addClass('jsHover');}).mouseleave(函数 () {$(this).removeClass('jsHover');});//console.log('现在悬停的元素:', hoveredElement);返回悬停元素；});$(文档).click(函数(事件){clickedElement = event.target.nodeName;//console.log('现在点击的元素:', clickedElement);返回点击元素；});/*$(document).mousemove(function () {控制台.clear();console.log('现在悬停的元素:'+hoveredElement+' -- & -- '+'现在点击的元素:'+ clickedElement);});*/});

 .page {高度:100%；宽度:100%；/*背景:rgba(12, 132, 49, 0.3);*/}分区 {高度:200px；宽度:250px；/*背景:粉红色；*/}跨度 {/*背景颜色:青色；*/}跨度:悬停，span.jsHover {背景颜色:蓝色；白颜色;字体粗细:粗体；}.activeElement {背景:#bfbfbf;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></脚本><span>在页面 div span 元素之前</span><br/><小时/><div 类="页面">
<span>pade div span 元素内部</span><p>wjhjhewh</p></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

Just mouse hover outside the first span element without entering the span space : Console output
```
hovered element now: BODY -- & -- clicked element now: undefined
```
Now click the left button in mouse( mousedown and mouseup) : console output
```
hovered element now: BODY -- & -- clicked element now: BODY
```

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?

Just mouse hover outside the first span element without entering the span space : Console output
```
hovered element now: BODY -- & -- clicked element now: undefined
```
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

Now just move the mouse just a hair : console output

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

**Now next set of tests **

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

相关文章