CSS转换不会更新悬停状态

本文介绍了CSS转换不会更新悬停状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

在转换对象时，直到您移动鼠标为止，悬停状态才会更新（CSS规则<：hover ）。

当您移动用户鼠标下方的DOM元素时（使用 transition 或其他等效项目），悬停状态不会更新，直到鼠标移动。有没有解决方法？我不想进入花哨的JS来触发'mouseover'事件。

JSFiddle： jsfiddle/forestka/8xJkR/1/

HTML：

< div id =below> 这是下面的一个。 （现在移动鼠标。）< / div> < div id =hover> 点击我！ （但点击后不要移动鼠标）< / div>

CSS：

#hover：hover， #below：hover { background-color：＃f00; } ＃下方{ padding：10px; 位置：绝对; top：0; 剩下：0; } #hover { background-color：#ddd; padding：10px; 位置：绝对; 剩下：0; top：0; 过渡：1点缓解; z-index：100; } ＃hover.hidden { top：50px; }

注意：不会让我插入无代码的JSFiddle链接？ ？

解决方案

这很奇怪。 IE10似乎也具有相同的行为。在主要的3种浏览器中，Firefox似乎是唯一能够满足你想要的功能的浏览器。 （显示隐藏div的悬停状态，因为它变得可见，而不必移动鼠标使其显示悬停状态）。

这显然不是你'如果你需要一个解决方法，你可以这样做：

$（＃hover）。click （）; $ b $（＃hover）。addClass（ $（＃below）。hover（function（）{ $（＃below）。css（background-color，＃f00）; $ b $（＃below）.css（background-color，''）; }）;

JS Fiddle Demo

有人可能有更好的解决方案，只使用CSS，但我认为我会给你的问题一个答案，无论如何。 / p>

When you transition objects, the hover state doesn't get updated (CSS rules with :hover) until you move the mouse.

When you move DOM elements beneath the users' mouse (with transition or some other equivalent) the hover state doesn't update until the mouse moves. Is there any workaround for this? I don't want to get into fancy JS to fire the 'mouseover' event.

JSFiddle: jsfiddle/forestka/8xJkR/1/

HTML:

<div id="below"> This is the one below. (Now move the mouse.) </div> <div id="hover"> Click me! (But don't move the mouse after you click) </div>

CSS:

#hover:hover, #below:hover { background-color: #f00; } #below { padding:10px; position: absolute; top:0; left:0; } #hover { background-color: #ddd; padding: 10px; position: absolute; left: 0; top:0; transition: top 1s ease; z-index: 100; } #hover.hidden { top: 50px; }

Side note: SO won't let me insert a JSFiddle link without code??

解决方案

That's pretty odd. IE10 seems to have the same behavior as well. Of the major 3 browsers, Firefox seems to be the only one that does what you want it to. (Show the hover state of the hidden div as it becomes visible instead of having to move the mouse to get it to show the hover state)

This is obviously not what you're wanting, but if you need a workaround you could do something like this:

$("#hover").click(function() { $("#hover").addClass("hidden"); $("#below").trigger("mouseover"); }); $("#below").hover(function() { $("#below").css("background-color", "#f00"); }, function () { $("#below").css("background-color", ''); });

JS Fiddle Demo

Someone may have a better solution using only CSS, but I thought I'd give your question a bump with an answer anyway.