Chrome не будет применять стиль при наведении курсора мыши при удерживании левой кнопки мыши

Question

В Google Chrome состояние при наведении курсора CSS не вызывается при удерживании левой кнопки мыши, как показано здесь:

a:hover {
  color: red;   
}

<a href="http://www.jsfiddle.net">words</a>

http://jsfiddle.net/RHGG6/1/

Эта проблема не возникает ни в FF8, ни в IE9.Это проблематично, потому что я реализую действие перетаскивания и использую CSS для выделения цели перетаскивания.Я мог бы сделать это довольно тривиально в JavaScript, но это кажется сложным для того, что по сути является проблемой CSS.Есть ли обходные пути к этому?

Answer 1

Из небольшой игры кажется, что Chrome 30.0.1599.69 m на windows7 не генерирует событие mouseenter, если удерживать левую кнопку при перемещении по элементу.Таким образом, использование события onmouseenter дает тот же результат, что и использование css - возможно, это (не инициированное) событие используется для сигнализации механизма css о том, что что-то нужно изменить.

В любом случае, вы можете просто добавить кодобрабатывать события mousemove и mouseout.Я просто устанавливаю цвет текста с помощью js, хотя что-то, что переключает класс, вероятно, будет лучшим вариантом.По крайней мере, js будет использовать время, которое должен был использовать css, поэтому он не будет перегружен, хотя он и отстраняет, переделывая все это всякий раз, когда мышь двигается.

Возможно, вы можете использовать removeEventListener из обработчика, который вы пытаетесь удалить.Если это так, вы можете присоединить js для обработки событий с помощью addEventListener, прикрепив к обоим событиям при загрузке страницы.Когда событие onmousemove было запущено, вы можете изменить стиль, а затем удалить обработчик.Затем, когда событие mouseout сработало, вы можете восстановить стиль и повторно присоединить обработчик onmove.Я не удивлюсь, если попытка удалить обработчик из события изнутри самого обработчика потерпит неудачу, но можно только попробовать.Это только добавило бы несколько байтов к js, но значительно улучшило бы эффективность (с точки зрения ссылки, а не всей страницы) - от потенциально очень плохой, если мышь перемещалась по ссылке, до 100% - то есть стильустанавливается ровно один раз и очищается ровно один раз за цикл ввода / вывода.

<a href="http://www.jsfiddle.net" onmousemove = "this.style.color='red'" onmouseout = "this.style.color=''">words</a>

Работает для меня - Примечание: тестируется только с хромом в win7.

Answer 2

Я также проверил Safari и Opera, и они ведут себя так же, как IE9 и Firefox.Кажется, Chrome - единственный браузер, который ведет себя таким образом.Единственный способ получить желаемое поведение - использовать Javascript.Предложения с псевдоклассом: active определенно не работают, я думаю, что они неправильно понимают проблему.Как ни странно: hover в Chrome работает, когда удерживается правая кнопка мыши, а не когда нажата левая кнопка.Пойди разберись.

Answer 3

В настоящее время (2018), хотя ошибка все еще сохраняется в Chrome, вы можете обойти ее, используя HTML5 drag & drop dragenter и dragleave события. Если у вас есть вложенный элемент dom, вы можете применить счетчик, чтобы смягчить события dragleave, которые происходят, когда мышь попадает на дочерний элемент.

var h1 = document.querySelector('h1')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add('dragover')
h1.ondragleave = _=> --counter || h1.classList.remove('dragover')

span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
h1,h2 { display:inline }

<h1>hover over me<span>, and me</span></h1>
<br>
<h2 draggable=true>drag me</h2>

* * 1010

Answer 4

Вы ищете: активный псевдокласс. : hover будет активирован только тогда, когда мышь наведена на узел. : активная сработает только тогда, когда узел был выбран или нажат.

Вот jsFiddle: http://jsfiddle.net/RHGG6/21/

Answer 5

Когда вы нажимаете левую кнопку мыши, не должен ли элемент находиться в активном состоянии?Разница здесь в том, что Firefox и IE разрешают активное состояние наследоваться от состояния наведения, а Chrome - нет.В CSS активное состояние можно контролировать с помощью псевдокласса: active.Вам необходимо явно установить стиль для активного состояния, чтобы обеспечить согласованность между браузерами.

Answer 6

Ссылка становится красной при наведении мыши на нее с помощью Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, поэтому вы можете обновить Chrome. Относительно примечания, псевдокласс: hover применяется к элементу, на который указывает курсор мыши. Чтобы стиль применялся, пока кнопка мыши удерживается при нажатии на ссылку, используйте псевдокласс: active. Я не уверен, почему FF и IE ведут себя по-разному.