1

私のページにはこのCSSがあります。

img {
  opacity:0.4;
  filter:alpha(opacity=40);
}

img:hover {
  opacity:1;
  filter:alpha(opacity=100);
}

これの影響を受けない画像がいくつか欲しいですopacity。これを達成するにはどうすればよいですか？

4

2 に答える 2

0

それを行うための最良の方法は、それに一意のIDを与え、それを個別にターゲットにすることです。

img#theID { 
// CSS for that particular image here
}
于 2013-03-25T23:57:30.587 に答える
0

方法1

このようなことを達成するための最も一般的な方法は、特異性の使用を示唆しています。基本的に、セレクターが具体的であるほど、優先順位は高くなります。このマークアップを検討してください

<section>
  <div class="container">
    <img src="blahblah.jpg" />
    <div class="wrap">
      <img src="blahblahblah.jpg">
    </div>
  </div>
<section>
<img>
<img>

使用する場合

img {
  /* Styles */
}

これらのスタイルはすべてに適用されます。しかし、あなたがこのようなものを使用した場合

section .container .wrap img {
  /* Different Styles */
}

CSSはあなたが与えることができる最も具体的な答えを好むので、それらのスタイルはその画像に優先されます。

方法2

user125697によって与えられたこの回答に加えて、IDをそのまま使用することを提案します

/* img#ID - ID can be whatever you want*/
img#hover {
  opacity:1;
  filter:alpha(opacity=100);
}

そして、あなたはそれをそのようにほのめかします

<img id="hover" src="blahblah.jpg" />

クリス・コイエはこれについてのペンを出版しました。結果をテストするには、ボックスからクラスの1つを削除するだけで、色が変わることがわかります。したがって、基本的にクラスは常にIDによってオーバーライドされます

方法3

奨励されていない

私が知っている最後の方法は!important、ページ上のすべてのスタイルをオーバーライドするを使用することです。何があっても。これは、将来的に多くの問題を引き起こす可能性があるため、非常に不承認です。

于 2013-03-26T00:20:18.080 に答える