Как убрать выделение на изображениях

Я хочу удалить выделение выделения на всех изображениях на моей странице. Я нашел несколько полезных дополнений, таких как:

CSS

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

Но когда я нажимаю кнопку мыши и выбираю несколько вещей или нажимаю Ctrl+A для «выбрать все», мои изображения выделяются синим оттенком. Я попытался изменить его через:

CSS

img::selection      {background:transparent;color:inherit;}
img::-moz-selection {background:transparent;color:inherit;}

Но это не имеет никакого эффекта.

Есть ли у кого-то полезное решение или его еще нет?

P.S. : Меня не волнует выбор изображений - я просто хочу избавиться от этой синей формы.


image html css selection selectall
person Kris    schedule 12.09.2014    source источник
comment
Попробуйте добавить стиль: схема: 0   -  person Brian    schedule 13.09.2014
comment
забыл упомянуть - уже проверял и как вы понимаете - не работает   -  person Kris    schedule 13.09.2014
comment
http://jsfiddle.net/zsbhczkk/ Chrome в порядке   -  person Pinal    schedule 17.09.2014
comment
IE тоже в порядке... так что это означает, что это проблема Firefox   -  person Danield    schedule 17.09.2014
comment
@Pinal - это не будет работать для FF и IE на моем устройстве   -  person Kris    schedule 17.09.2014
comment
См. stackoverflow.com/questions/ 6816080/ для получения дополнительной информации   -  person Pinal    schedule 17.09.2014

Ответы (2)


arrow_upward
1
arrow_downward

Вот дурацкое решение, которое я придумал...

1) После некоторого тестирования я обнаружил, что это происходит только в Mozilla. Другие браузеры не показывают синее выделение на изображениях, когда код

img::selection {
    background: transparent;
}

установлен.

2) Даже мозилла - проблема только с элементами изображения. Но другие элементы с background-image подчиняются правилу ::selection.

Таким образом, технически мы могли бы обойти это, предполагая, что добавим пустой диапазон в нашу разметку после каждого элемента img, для которого мы установили display:none;

Затем мы можем добавить некоторый CSS, который будет работать только в firefox, который устанавливает изображения в display:none и помещает фоновое изображение в соседний диапазон.

Нравится:

FIDDLE

**

img::selection {
    background: transparent;
}
img + span {
    display: none;
}

@-moz-document url-prefix() {
    img {
        display: none;
    }
    
    img + span {
        background: url(http://placehold.it/200x200) no-repeat;
        width: 200px;
        height: 200px;
        display: block;
    }
}
<div>Hello there </div>

<img src="http://placehold.it/200x200" /><span></span>

<div>Hello there </div>
1: http://jsfiddle.net/GMuzV/30/

person Danield    schedule 17.09.2014
comment
Ну, это работает хорошо - к сожалению, я забыл упомянуть, что мне нужен сам тег ‹img› для целей SEO. Если сегодня не будет найдено никакого другого решения - вы получите вознаграждение за свои исследования и работу;) - person Kris; 17.09.2014
comment
Я не предлагал удалять элементы img. Мое решение предлагает просто установить на них display:none, а также - только для forefox. Это не должно мешать поисковой оптимизации, потому что разметка остается почти такой же (за исключением дополнительного интервала). - person Danield; 17.09.2014
comment
Вы действительно думаете, что гугл-боты не способны понизить ваше SEO, так как на дисплее ключевые элементы: нет; или видимость: скрыто; ? Тогда почему у людей большие видимые облака тегов или нижний колонтитул? - person Kris; 17.09.2014

arrow_upward
0
arrow_downward

Это отключило подсветку элемента DOM:

function disableSelection(target){
    if (typeof target.onselectstart!="undefined") // if IE
        target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") // if Firefox
        target.style.MozUserSelect="none";
    else // others
         target.onmousedown=function(){return false;}

    target.style.cursor = "default";
}

Используйте это так:

disableSelection(document.getElementById("my_image"));
person KaMZaTa    schedule 19.09.2014
comment
Я ценю вашу работу, но Firefox все еще путается с этим кодом :/ - person Kris; 20.09.2014