Использование хром 39 (для Mac) следующий не работаетMouseOut и MouseOver события не стрельбы должным образом в хроме 39
<div id='canvasWrapper'>
<canvas id='main0'></canvas>
<canvas id='main1'></canvas>
<canvas id='main2'></canvas>
<div id='mainToolbar'>
<img src='magnify.png'>
<img src='pencil.png'>
<img src='plus.png'>
<img src='ex.png'>
</div>
</div>
<script>
var wrap = document.getElementById('canvasWrapper');
wrap.addEventListener('mouseover', function(){
document.getElementById('mainToolbar').style.display = 'block';
})
wrap.addEventListener('mouseout', function(){
document.getElementById('mainToolbar').style.display = 'none';
})
var imgs = [].slice.call(document.querySelectorAll('img'));
imgs.forEach(function(img) {
img.addEventListener('mouseover', function() {
var string = img.className;
string += ' inverted';
img.className = string;
})
img.addEventListener('mouseout', function() {
var string = img.className.split(' ').filter(function(classy) {
return classy != 'inverted';
}).join(' ');
img.className = string;
})
})
</script>
панели инструментов с иконками должен показать, когда пользователь наводит мышь на холст, содержащий DIV, спрячьтесь на мыши. С изображениями мышь над ними добавляет класс, который содержит свойство css filter, чтобы инвертировать цвета. Все это работает точно так, как ожидалось, в Safari 7.1 и даже на FF 28. Однако в хроме события срабатывают только при нажатии на или вне div canvasWrapper. Установка функции на onmouseover свойства div не имеет значения по сравнению с addEventListener. Если это известная ошибка в хроме 35+ минут поиска в Google, она не дала результатов. Кто-нибудь знает, почему и как это исправить?
PS, не уверен, что его релевантные или нет, но холсты являются слоями: все они имеют одинаковый размер и перекрываются точно. Заранее спасибо.
Проверьте, что ваш массив 'imgs' фактически содержит то, что он должен: я никогда не видел' [] .slice.call (document.querySelectorAll ('img')); 'before, попробуйте использовать' document.getElementsByTagName ("img «)'. – theonlygusti
В этом случае то, что я написал, более или менее эквивалентно. Единственное отличие, насколько мне известно, это то, что nodeList, возвращаемый 'querySelectorAll', не является живым, он не отражает изменения в DOM, поскольку список был отбракован (' getElementsByTagName' возвращает «живой» список) –
Я не думаю инвертированный, как класс, делает что-либо по умолчанию в chrome; вы правильно настроили свой css? – theonlygusti