ここから本文です

マウスオーバーで画像を半透明化するようにしていて、一部だけ除外する方法

アバター

ID非公開さん

2013/5/1920:35:11

マウスオーバーで画像を半透明化するようにしていて、一部だけ除外する方法

今、ホームページを作っていて、
CSSに


a:hover img {
opacity: 0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(Style=3,Opacity=80,FinishOpacity=80);
}


と入力して、リンク画像にマウスオーバーすると、画像が半透明になるようにしています。
そこで質問です。
ひとつの画像だけ、半透明化させないようにしたいのです。
どうすれば良いのでしょうか。
ご回答よろしくお願いします。

閲覧数:
7,567
回答数:
2
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

sit********さん

2013/5/1921:31:23

>doraqfujicoさん

>ひとつの画像だけ、半透明化させないようにしたいのです。

class指定したらいいです。

<a href="" class="hoge"><img></a>

a.hoge:hover img {
opacity: 1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(Style=0,Opacity=100,FinishOpacity=100);
}

http://www.tagindex.com/stylesheet/basic/format2.html

アバター

質問した人からのコメント

2013/5/20 17:37:59

感謝 皆様回答ありがとうございます。
解決しました。

最初の回答の方にBA差し上げます。
ほかの方も詳しい説明ありがとうございました。

ベストアンサー以外の回答

1〜1件/1件中

ven********さん

編集あり2013/5/2011:34:53

◆◆◆ 追記 ◆◆◆

質問への回答として不足していた内容を、
最後に追加しました(^▽^;
リンクのロールオーバーに対して、
例外の指定をする方法を解説しています♪


◆◆◆ 回答 ◆◆◆

こんにちは♪

すべての <img> 要素に「透過」のような共通の CSS を設定し、
一部の <img> 要素だけ例外にするような場合には、
その「一部の要素」にだけ
別の CSS 設定を追加するといいですょヽ(゜▽^*

方法は色々あります。
「インライン・スタイルシート」を使う方法、
要素の「ID」を使う方法、
要素の「Class名」を使う方法。

それぞれを順に説明してみます♪

※ 透過プロパティ Alpha を指定する場合は、
「progid:DxImageTransform~」という長い記述をしなくても、
「 alpha( opacity=値 ) 」 だけでも大丈夫です(^ー^


◆◆◆ インライン・スタイルシート ◆◆◆

共通の CSS 設定を、
インライン(行内)の指定で直接変更します。

インライン・スタイルシートは、
その名の通り、行内で直接スタイルを指定するもので、
要素の style 属性内に記述します・ω・)ノ
┌────────
| <img style="opacity:100;" filter:alpha(opacity=100);">
└────────

CSS で全体を設定し、
インライン・スタイルシートで細部を調整する、
という方法は、
ホームページの作成では非常に有効です♪

例えば、
サイズの異なる画像を、
サイズ以外の書式を共通で配置する場合、
共通の書式だけ CSS で指定し、
サイズだけインライン・スタイルシートで指定するようにします。

┌──[ 例 ]──────
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-------- CSS -------->
<style type="text/css"><!--

/*---- すべての画像の書式 ----*/
img{
margin: 4px;
border: solid 2px #f69;
vertical-align: middle;
}
--></style>
</head>
<body>

<!-------- 画像ごとに異なるサイズ指定 -------->
<img src="img1.jpg" style="width:320px; height:240px;">
<img src="img2.jpg" style="width:240px; height:320px;">
<img src="img3.jpg" style="width:280px; height:160px;">

</body>
</html>
└────────

今回の、
1つの画像だけ不透明にする場合は、

┌──[ 例 ]──────
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-------- CSS -------->
<style type="text/css"><!--

/*---- すべての画像の書式 ----*/
img{
opacity: 0.8;
filter: alpha( opacity=80 );
}
--></style>
</head>
<body>

<!-------- ひとつの画像だけ例外指定 -------->
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg"
style="opacity:0.8; filter:alpha( opacity= 80 )">
<img src="img4.jpg">

</body>
</html>
└────────


◆◆◆ 要素の「ID」、「Class名」を使う ◆◆◆

ひとつの要素だけ、
他と異なる CSS を適用するには、
インライン・スタイルシート以外に、
「ID」 による CSS 指定があります。

要素に id="ID" を付けておき、
CSS では、セレクタに「#ID」 を指定します。
┌──[ HTML ]──────

| <img src="top.jpg" id="TopImage">
| <img src="img1.jpg">
| <img src="img2.jpg">

├──[ CSS ]──────
| /*---- すべての画像 ----*/
| img{
| opacity: 0.8;
| filter: alpha( opacity=80 );
| }
| /*---- 例外画像 ----*/
| #TopImage{
| opacity: 1;
| filter: alpha( opacity=100 );
| }
└────────

「ID」 は、
ひとつのページに同じ ID が複数あってはいけないので、
例外が「ひとつだけ」の場合しか使えません。

例外が複数ある場合には、
「ID」 ではなく、
「Class名」 で CSS を区別します。
要素に class="Class名" を指定し、
CSS ではセレクタに「.Class名」をつかいます。
┌──[ HTML ]──────

| <img src="top.jpg" class="noTrans">
| <img src="img1.jpg">
| <img src="img2.jpg">

├──[ CSS ]──────
| /*---- すべての画像 ----*/
| img{
| opacity: 0.8;
| filter: alpha( opacity=80 );
| }
| /*---- 例外画像 ----*/
| .noTrans{
| opacity: 1;
| filter: alpha( opacity=100 );
| }
└────────

「Class名」は、
ひとつのページ内でも同じクラス名を複数指定できるので、
半透明にする画像に「Class名」をふることも出来ますね゜▽^)o
┌──[ HTML ]──────

| <img src="top.jpg">
| <img src="img1.jpg" class="Opa80">
| <img src="img2.jpg" class="Opa80">

├──[ CSS ]──────
| /*---- すべての画像 ----*/
| .Opa80{
| opacity: 0.8;
| filter: alpha( opacity=80 );
| }
└────────

また、
クラス名は 「ひとつの要素に複数指定する」 事が出来ます。
どういうことか、というと、
不透明度を 0.8 にするクラス Opa80 と、
太さ 2px の枠線を付けるクラス Bdr2 を用意しておくと、
class="Opa80 Bdr2" と指定した要素は、
不透明度 0.8 になって太さ 2px の枠線がつきます。
┌──[ HTML ]──────
| <img src="img1.jpg" class="Opa80 Bdr2">

├──[ CSS ]──────
| /*---- 不透明度 0.8 ----*/
| .Opa80{
| opacity: 0.8;
| filter: alpha( opacity=80 );
| }
| /*---- 枠線 2px ----*/
| .Bdr2{
| border: solid 2px #f69;
| }
└────────

ひとつの要素い指定した複数の Class名 に、
ちがった不透明度、ちがった枠線などが指定されている場合、
あとに記述した Class名 の書式が適用されます・ω・)o


◆◆◆ リンクのロールオーバー ◆◆◆

リンクのロールオーバーの指定には、
インライン・スタイルシートは使えませんね^^;

リンクのロールオーバーで、
1つの画像だけロールオーバーしないようにするには、
2つの 「Class名」 を使った方法で指定すると
うまくいきますヽ(^ー^o

┌──[ HTML ]──────

| <a class="myLink noHover"><img></a>
| <a class="myLink"><img></a>
| <a class="myLink"><img></a>

├──[ CSS ]──────
| /*---- リンク内の画像 ----*/
| .myLink:hover img{
| opacity: 0.8;
| filter: alpha( opacity=80 );
| }
| /*---- ロールオーバーしないリンク画像 ----*/
| .noHover:hover img{
| opacity: 1;
| filter: alpha( opacity=100 );
| }
└────────

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる