Удалить синее наложение/выделение с выбранных изображений

Я делаю веб-приложение с несколькими анимированными кликабельными изображениями и замечаю (особенно в хроме, но также и в ff), что любое легкое случайное перетаскивание изображения делает его синим. (чтобы указать, что он выбран) Есть ли способ в jquery, css или html деактивировать этот раздражающий побочный эффект или, возможно, есть способ использовать изображения без этого поведения по умолчанию?

Мои изображения находятся внутри неупорядоченных списков, например:

<ul>
  <li><img src="path"/></li>
  <li><img src="path"/></li>
  <li><img src="path"/></li>
</ul>

person Code Novitiate    schedule 07.03.2011    source источник
comment
stackoverflow.com/questions/826782 / =› jsfiddle.net/steweb/2qPWz   -  person stecb    schedule 08.03.2011
comment
Отвечает ли это на ваш вопрос? Как отключить выделение выделения текста   -  person The Codesee    schedule 18.07.2020


Ответы (1)


Я думаю, чтобы предотвратить кросс-браузерный выбор пользователя, вы могли бы использовать:

img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}

демонстрация JS Fiddle.

person David says reinstate Monica    schedule 07.03.2011
comment
абсолютно идеальное решение. Большое спасибо. Пытался найти это в сети. Вы сделали мой день. :D - person Code Novitiate; 08.03.2011
comment
@Code Novitiate, никаких проблем, рад помочь! знак равно - person David says reinstate Monica; 08.03.2011
comment
Вы также можете использовать layout: none; - person Mr. Smee; 25.07.2011
comment
@mrsmee: outline: none; предотвращает применение контура по умолчанию к элементу, находящемуся в фокусе; но это не мешает выбору (по крайней мере, не в Chromium 12 и Firefox 5 в Ubuntu 11.04...). В каком браузере/платформе вы наблюдали такое поведение? - person David says reinstate Monica; 25.07.2011
comment
Это больше не кажется действительным, при тестировании в Firefox 17 на Ubuntu 12.04 изображения скрипки по-прежнему можно перетаскивать и выбирать. (CTRL/CMD+A для воспроизведения). - person joar; 06.12.2012
comment
чтобы остановить перетаскивание изображений в Firefox: draggable=false stackoverflow.com/questions/7439042/ - person Code Novitiate; 18.12.2013
comment
@DavidThomas Отлично!! Это работает для меня для FlexSlider - person Mahesh; 05.02.2014
comment
Это сработало для меня в Firefox 29 после добавления к изображению прозрачной границы в 1 пиксель. IMG{граница: 1px сплошная прозрачная; -webkit-user-select: нет; -khtml-user-select: нет; -moz-user-select: нет; -o-выбор пользователя: нет; выбор пользователя: нет; } - person Peh; 16.06.2014
comment
@Fr0zenFyr: у меня это работало в галерее. Когда я быстро нажимал на следующую кнопку изображения, FF29 отображал изображения с этим синим прозрачным наложением. Для отладки я добавил к изображению красную рамку шириной 10 пикселей, чтобы посмотреть, работает ли CSS. Я не знаю, почему, но изображения больше не появлялись с этим синим наложением. Итак: для меня это сработало. - person Peh; 16.06.2014
comment
Герой! Я сходил с ума, пытаясь понять, что было. - person sowasred2012; 11.12.2014