1

次の HTML があります。

<a href="somewhere">
    <span class='mask'></span>
    <img src="my_image.jpg" />
</a>

および次の CSS:

a {
    display: block;
    position: relative;
}

a:hover .mask{
    background: rgba(255,255,255,0.1);
}

.mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

そして、視覚的には、期待どおりに機能します。をホバーする<a>と、それ自体の上に半透明のマスクが表示されます。

ただし、IE を除くすべてのブラウザーで、 を右クリックすると<a>、期待どおりに動作します — リンクのコンテキスト メニューが表示されます。

しかし、IE では、ページ内の他の静的アイテムを右クリックしたかのように、コンテキスト メニューが表示されます。コンテキスト メニューを IE で期待どおりに動作させる方法を探しています。

乾杯！

4

1 に答える 1

0

これは IE 9 で機能します - z-index: -1 を に追加し.maskます。z-index はマスキング ビジュアルに影響しますが。

.mask {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

http://jsbin.com/osegib/1/edit#/osegib/2/edit

于 2013-03-05T09:26:00.067 に答える