Question

所有

[更新] 我找到另一种方法来实现这个，而不是解决方案，但只是一个有效的方法：使用mousedown作为事件触发器（因为我需要一个拖动动作，所以无论如何都应该有一个mousedown事件），里面，将鼠标悬停事件绑定到该范围（我不知道为什么，但是在mousedown中绑定鼠标可以使mouseover work on span），给它一个改变背景颜色的新类;

我对Chrome 40的问题是：

I set a style:

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


<span>TEST AREA</span>

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

此处已解决此问题，未发布任何解决方案： https://code.google.com/p/chromium/issues/detail?id=122746

我测试了IE11 Firefox35，它们都运行良好。只有Chrome 40不起作用：（

任何人都可以帮助设置样式，或者提供一种方法来触发鼠标悬停并执行拖动操作（我想要做的是拖动一些东西，而backgroundcolor更改表示拖动超过了目标区域。）？谢谢！

Answer 1

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

所以我接着设计了一个简单的代码片段，用于跟踪悬停和点击事件触发的事件。

您可以找到此snippet fiddle here。

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

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

只需将鼠标悬停在第一个span元素之外而不输入span空间：Console output
```
hovered element now: BODY -- & -- clicked element now: undefined
```
现在单击鼠标左键（mousedown和mouseup）：console output
```
hovered element now: BODY -- & -- clicked element now: BODY
```

现在只需移动鼠标：控制台输出

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

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

只需将鼠标悬停在第一个span元素之外而不输入span空间：Console output
```
hovered element now: BODY -- & -- clicked element now: undefined
```
现在单击鼠标左键（mousedown和mouseup）：console output
```
hovered element now: BODY -- & -- clicked element now: undefined
```
请注意，现在点击的元素显示未定义。将它与chrome的结果进行比较

现在只需移动鼠标：控制台输出

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

**现在下一组测试**

现在单击第一个span元素外部而不释放鼠标将其拖动到span元素内，然后释放。释放后不要移动鼠标。 chrome中的控制台输出
```
hovered element now: SPAN -- & -- clicked element now: BODY
```
FF的控制台输出

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

注意这里的输出差异。

现在，如果你问我为什么在浏览器之间发生这种情况，我不知道。我可以说:hover的伪类不会在chrome中被触发但在FF中会触发它。

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

这是我的解决方法。

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

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

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

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

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

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

＆＃13;

$(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);                
            });
            */
});

＆＃13;

        .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;
        }

＆＃13;

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

＆＃13;

希望这会有所帮助。 快乐编码

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

1 个答案: