0

私は自分が望むものを達成することにとても近づいています...しかし、cssで可能なことの限界に達したのではないかと思っています.

http://host17.qnop.net/~gjcwebde/ecocamel/index.php?option=com_content&view=article&id=28&Itemid=49に移動すると、

製品スライダーがあります。私はそれを手に入れようとしています..

1) 製品はロード時に 100% の不透明度で開始します。2) 製品の上にカーソルを置きます..上に移動している製品は不透明度 100% のままで、他の製品はすべて不透明度 0.5 (暗くなります) と表示されます。

私はcssでこれをほぼ達成しました。ポップアップする説明の上にカーソルを合わせると...アクティブな画像は0.5の不透明度に戻ります。ポップアップの説明にカーソルを合わせながら、この画像の不透明度を制御することはできますか? 本当にそう願っています！それに失敗した...どうすればjsでこれを達成できますか? ここでいくつか見ましたが、私の状況に実際に当てはまるものはありません。あなたが理解できるように十分な情報を提供したことを願っています。乾杯！

4

4 に答える 4

1

#containingDiv:hover img { }含まれているdivのいずれかにカーソルを合わせたときにimgに影響を与えるので、私があなたの場合、Ryanのソリューションは、カーソルを合わせている場合にのみimgに影響を与えることを使用します

于 2012-08-13T12:53:20.343 に答える
0

私はあなたのhtmlを拾い上げてフィドルに入れました。http://jsfiddle.net/hMW8N/をご覧ください

とにかく、これはあなたが基本的に必要とするすべてです。これらのセレクターで指定しすぎていますが、理解しやすいように指定しています。

#slider-list-stick-1:hover .slide-index{
    opacity: 0.5;
    filter:alpha(opacity=50); //ie
}

#slider-list-stick-1 .slide-index:hover {
    opacity: 1;
    filter:alpha(opacity=100); //ie
}
于 2012-08-13T13:00:15.390 に答える
0

あなたのスタイルにこの宣言を追加してください

.slide-index:hover img{
    opacity: 1;
}

他divのsもslide-indexコンテナ内にあるため、hover効果は引き続き適用されます。

于 2012-08-13T13:00:37.220 に答える
0

これは、ユーザーがホバリングしていないときの画像の不透明度に対して機能するはずです。

divName img {
 opacity:0.3;
 filter:alpha(opacity=30);(IE)
}

そして、ホバーしたとき (これには、ホバーしたときに表示されるように、製品情報のスタイルが含まれている必要があります)。

diveName img:hover{
 opacity:1.0;
 filter:alpha(opacity=100);(IE)
}

また、開始時にアクティブなクラスをスローして、ページの読み込み時に少なくとも 1 つの製品が表示されるようにします

例えば：

divName img .activeLoad{
 opacity:1.0;
 filter:alpha(opacity=100);(IE)
}
于 2012-08-13T12:44:23.763 に答える