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

Question

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

6

大家好：

[更新] 我找到了另一种实现方法，不是解决方案，而只是一个有效的技巧：使用mousedown作为事件触发器（因为我需要拖动操作，所以无论如何都应该有一个mousedown事件），在其中将mouseover事件绑定到那个span上（我不知道为什么，在mousedown内部绑定mouseover可以使mouseover在span上起作用），给它一个新的类来改变背景颜色；

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

I set a style:

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


<span>TEST AREA</span>

当我按下鼠标并移动时，背景颜色没有改变。

这里已经提到了，但没有解决方案： https://code.google.com/p/chromium/issues/detail?id=122746 我测试了IE11 Firefox35，它们都表现得非常好。只有Chrome 40不起作用:(

有人能帮忙应用样式或提供一种触发该span上的mouseover的方法（我想做的是将某物拖动到其上，背景颜色的变化表示拖动已经结束）吗？谢谢！

- Kuan

为什么不直接使用拖放事件，例如dragenter/dragover/dragend/dragleave等？请参见https://developer.mozilla.org/docs/Web/Guide/HTML/Drag_and_drop#events。 - Noyo

可能是重复的问题：当按住鼠标左键时，Chrome不会应用CSS hover样式。 - adabru

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sai · Accepted Answer

有趣的Chrome bug！在看到你的问题之前，我还没有注意到它。这使我想到了FF是如何处理此事件的。

因此，我设计了一个简单的代码片段，跟踪悬停和点击事件触发的时间。

您可以在此片段中找到它。

现在，在这个代码片段中，如果您删除最后一段的注释，

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

然后请在下面的部分进行评论。

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

现在代码复制了你提到的问题（请在Chrome和FF中尝试，我能够在Chrome 41中复制）。

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

在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

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

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 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

请注意这里的输出差异。

至于为什么不同浏览器之间会出现这种情况，我不清楚。我只能说，:hover 伪类在 Chrome 中没有被触发，但在 Firefox 中会被触发。

那么你会问，解决方案是什么？

我的解决方法很简单，当事件发生时，手动添加 hover 类。这样，Chrome 就会动态地添加类，而在 Firefox 中则已经处于幸福的状态 ;)

现在，在 fiddle 中取消注释代码块...

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

如果您愿意，可以注释最后一节执行控制台输出的内容。

这个代码块的作用是在特定触发事件时向 Span 元素添加 jsHover 类（与 css 中定义的常规 :hover 伪类一起定义）。

完整的代码段在此处...

$(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>

希望这可以帮到你。愉快编码。