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

Question

全部:

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

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

I set a style:

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


<span>TEST AREA</span>

当我 mousedown 然后 mouseover 时，背景颜色没有改变

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

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

任何人都可以帮助应用样式或提供一种方法来触发鼠标悬停在该跨度上并采取拖动操作(我想做的是在其上拖动一些东西并且背景颜色变化表示拖动在目标区域上方。)？谢谢!

Answer 1

有趣的 chrome 错误!在我遇到你的问题之前我没有注意到它。这让我开始思考 FF 是如何处理这个事件的。

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

你可以找到这个 snippet fiddle here .

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

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

1. 只需将鼠标悬停在第一个跨度元素之外而不进入跨度空间:控制台输出

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

2. 现在点击鼠标左键(mousedown 和 mouseup):控制台输出

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

3. 现在只需稍微移动一下鼠标:控制台输出

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

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

1. 只需将鼠标悬停在第一个跨度元素之外而不进入跨度空间:控制台输出

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

2. 现在点击鼠标左键(mousedown 和 mouseup):控制台输出

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

   请注意，现在点击的元素显示为 undefined。将其与 chrome 的结果进行比较

3. 现在只需稍微移动一下鼠标:控制台输出

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

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

1. 现在在第一个 span 元素外单击，不要松开鼠标，将其拖到 span 元素内，然后松开。释放后不要移动鼠标。 chrome 的控制台输出

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

   FF 的控制台输出

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

还要注意此处输出的差异。

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

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

这是我的解决方法。

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

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

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

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

这样做是在触发我们的小问题的特定事件集发生时，将 jsHover 类(与常规的 :hover 伪类一起在 css 中定义)添加到 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);
        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>

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