2

更新-申し訳ありませんが、効果が見られたWebサイトへのリンクを提供する必要がありました。ここに行きます-http://www.w3schools.com/Css/css_image_transparency.asp

私がそこで見たコード（およびこの質問の根拠）は次のとおりです-

    <img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

元の質問は次のとおりです-

JSを使用せずに実行できるロールオーバー効果を探していたところ、画像の不透明度設定を教えているw3schoolsのWebサイトに出くわしました。コードには、jsは含まれていません。純粋なcssだけです。

私は自分のウェブページ（まだjsがない）に同じコードを使用しようとしましたが、コードがChromeとIE7.0の両方で完全に機能することに気づきました。コードには「onmouseover」イベントともう1つの「onmouseout」イベントがあり、不透明度の設定に基づいてホバー効果を与えます。

これらの効果（onmouseoverおよびonmouseout）が-1.純粋なcss 2.標準に準拠している（xhtml 1+およびcss2）3.ハッキングが含まれているかどうか疑問に思う

私はまだこれらのことがie7で機能したとは信じられず、なぜこれらのイベントに関するドキュメントがないのか疑問に思っています。

4

4 に答える 4

3

CSS にはそのような「onmouseover」イベントや属性はありません。それが JavaScript です。CSS は、マウス オーバー イベントに ":hover" 疑似クラスを使用します。簡単な例として、

HTML:

<div id="someid">I'm a random div.</div>

CSS:

#someid {
    background: #fff;
}

#someid:hover {
    background: #000;
}

この例では、#someid要素にカーソルを合わせると、背景が白から黒に変わります。

これは、CSS でマウス オーバー イベントを処理する正しい方法です。これは標準に準拠しており、最新のすべてのブラウザー (および一部の古いブラウザーも) で動作します。

補足: IE6 では常に機能するとは限りません。IE6 は、アンカー タグ ("a:hover" など) に適用された ":hover" 疑似クラスのみを認識します。

あなたの質問の更新に基づいて：

<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

それは JavaScript を使用してスタイルを変更することです。CSSであるこれの唯一の部分はstyle='...'部分です。onmouseoverとのテキストonmouseoutは JavaScript です。

純粋な CSS でやりたいことを行うには、次のようにする必要があります。

<html>
<head>
    <style>
    img.opacity-image {
        opacity: 0.4;
        filter:alpha(opacity=40); /* This is IE specific and NOT standards complaint */
    }

    img.opacity-image:hover {
        opacity: 1;
        filter:alpha(opacity=100); /* Again, 'filter:' is IE specific. */
    }
    </style>
</head>
<body>
    ...
    <img src="klematis.jpg" class="opacity-image" />
    ....
</body>
</html>

opacityは CSS3 であり、最新のブラウザーでのみサポートされています(IE6、7、8 はサポートしていません)。を使用filter:...して不透明度を IE で動作させることができます (ただし、PNG は正しく処理されませんが、JPG を使用しているため、問題でfilterはありません)。 CSS 標準。ただし、最新のブラウザでも正しくレンダリングされるため、一般的にはそれほど重要ではありません。

于 2011-05-10T15:58:46.280 に答える
2

:hover イベントについて話していると思いますか?

<div id="hoverDiv"> Something should happen when you hover on me</div>

スタイル：

#hoverDiv:hover{ background-color:red; }

視覚的な例: http://jsfiddle.net/zRnug/

:hover#selector { } 領域内のスタイルシートに追加するすべてのホバー効果。

前に関連付けたいすべての効果 (要素のデフォルト スタイル) は、 #selector{ } 領域内で使用するだけです。

于 2011-05-10T15:58:32.990 に答える
1

これらは Javascript インライン イベント ハンドラです。

:hoverセレクターを使用して純粋な CSS でこれを行うことができます。

于 2011-05-10T15:58:27.217 に答える
1

CSS は:hover、項目の上にマウスを移動するとトリガーされるセレクターをサポートしています。

.mydiv {background-color:red;}
.mydiv:hover {background-color:blue;}

:hoverこのようにセレクターを使用して、CSS プロパティをマウスオーバーで変更するように設定できます。

不透明度は CSS3 の機能です。ほとんどのブラウザでサポートされていますが、IE8 以前ではサポートされていません。別の方法があります (IE 固有のfilterプロパティを使用)。標準の CSS よりも手間がかかり、正しく設定するのは困難ですが、実行することはできます。

IE6 以下は:hoveron<a>要素のみをサポートすることに注意してください。他のブラウザー (IE7 以降を含む) は、すべての要素に対してそれをサポートしています。私のアドバイスは、サイトで IE6 をサポートしないことですが、必要な場合は、:hover正しく動作させるためのハックがあります。

于 2011-05-10T16:01:38.047 に答える