0

ページ上のすべての画像の選択ハイライトを削除したいと考えています。次のような便利な追加が見つかりました：

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;}

しかし、それは何の効果もありません。

誰かが有用な解決策を持っていますか、それともまだありませんか?

PS : 画像を選択することは気にしません。その青い形を取り除きたいだけです。

4

2 に答える 2

1

ここに私が思いついた奇抜な解決策があります...

1) いくつかのテストの後、これは mozilla でのみ発生することがわかりました。他のブラウザでは、コードが

img::selection {
    background: transparent;
}

が設定されています。

2) mozilla でさえ - 画像要素にのみ問題があります。ただし、ルールにbackground-image従う他の要素。::selection

したがって、技術的には、display:none; に設定した各 img 要素の後にマークアップに空のスパンを追加すると仮定すると、これを回避できます。

display:none次に、画像を設定し、隣接するスパンに背景画像を配置する、Firefox でのみ実行される CSS を追加できます。

このような：

フィドル

**

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/

于 2014-09-17T10:51:32.537 に答える