2

ホバー時に1つのdivが強調表示されているときに、他のdivをフェードしようとしています。これはjqueryを使用して可能であることは知っていますが、css3を使用するだけで可能かどうか疑問に思っています.

以下のコードでjqueryを使用してみましたが、divには最初から.highLightクラスがなく、ホバーしたときのみ、.panel:not(.highLight)を使用しているため、すべてのdivが最初からフェードアウトしてしまいます{不透明度:0.5;}

これが理にかなっていることを願っています。

Jクエリ

$('.panel').hover(function(){
        $(this).toggleClass('highLight');
});

CSS

.highLight{
    background-color: #333333;
}
.panel{
    -webkit-transition:0.3s;
    transition:0.3s;
    opacity:1;
}
.panel:not(.highLight){
    opacity:0.5;
}

以下の HTML

<section id="areas">
<div class="container content">

    <div class="projects">
        <div class="panel">
        </div>
    </div>
    <div class="blog">
        <div class="panel">
        </div>
    </div>
    <div class="contact">
        <div class="panel">
        </div>
    </div>
</div>
</section>
4

4 に答える 4

4

現在のプロジェクトで調整したい唯一のセレクターは次のとおりです。

#areas:hover > div {
    opacity: 0.5;
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
#areas:hover > div:hover,
#areas:hover > div:hover * {
    opacity: 1;
    background-color: #ffa;

    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

に：

.panel
{
    opacity: .5;

    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#areas:hover > div:hover .panel 
{
    opacity: 1;
    background-color: #ffa;

    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

css の最初の部分は、パネルが選択されていないため、デフォルトのレイアウトです。不透明度を 0.5 に設定して可視性を維持しましたが、完全にフェードアウトすることもできます。
2 番目の部分は、#area div の div 要素にカーソルを合わせたとき、または #area div 自体にカーソルを合わせたときに発生します。css 設定は .panel に対してのみ設定されます。この場合、不透明度は 1 に設定され、明るい背景色が設定されます。
したがって、ホバーは単なるトリガーであり、その後の要素が実際に使用される要素になります (この場合)。

例

編集

ホバーされていない要素がホバーするとすぐに消えるようにする関数を追加する場合は、次のコードを追加する必要があります。

#areas:hover > div:not(:hover) > .panel
{
    opacity: 0; 

    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

:not()セレクターを使用して、 : hover 疑似クラスを除外します。
したがって、この場合、#area はトリガー、div はエクスクルーダー、.panel は有効になる実際の要素です。

jsフィドル

于 2013-10-04T17:50:19.670 に答える
3

このCSSはどうですか

#areas .panel {
    -webkit-transition:0.3s;
            transition:0.3s;
}    

#areas:hover .panel {
    opacity: 0.5;
}

#areas:hover .panel:hover {
    opacity: 1;
}

デモはこちら - http://jsfiddle.net/ytsTR/

于 2013-10-03T22:57:20.913 に答える
0

/// css

  .content .testing {
          -moz-transition: opacity 0.5s linear;
          -o-transition: opacity 0.5s linear;
          -webkit-transition: opacity 0.5s linear;
          transition: opacity 0.5s linear;
  }

   .content:hover .testing {
           opacity: 0.5;
   }

   .content .testing:hover {
          opacity: 1 !important;
   }

///html

    <section id="areas">
        <div class="container content">

            <div class="projects testing">
              <div class="panel">
               Div one
            </div>
       </div>

       <div class="blog testing">
            <div class="panel">
                 Div two
       </div>

       </div>
            <div class="contact testing">
                 <div class="panel">
                     Div three
                 </div>
             </div>
           </div>
      </div>
   </section>

Hope this helps

于 2013-10-04T17:23:43.020 に答える
0

最も簡単に私が提案したいのは：

/* aesthetics, this block doesn't really matter; it's just to help visualise */
section, div {
    border: 1px solid #000;
    min-height: 2em;
    line-height: 2em;
    width: 90%;
    margin: 0.5em auto;
}

section div {
    opacity: 0.5;
    background-color: #fff;
    /* vendor-prefixes stripped for brevity */
    transition: all 0.5s linear;
}

section > div:hover,
section > div:hover * {
    opacity: 1;
    background-color: #ffa;
    /* vendor-prefixes stripped for brevity */
    transition: all 0.5s linear;
}

JS フィドルのデモ。

sectionがホバリングされるまで、それらを完全に表示することを前提としています。

section > div {
    opacity: 1;
    background-color: #fff;
    /* vendor-prefixes stripped for brevity */
    transition: all 0.5s linear;
}

section:hover > div {
    opacity: 0.5;
    /* vendor-prefixes stripped for brevity */
    transition: all 0.5s linear;
}

section:hover > div:hover,
section:hover > div:hover * {
    opacity: 1;
    /* vendor-prefixes stripped for brevity */
    transition: all 0.5s linear;
}

JS フィドルのデモ。

于 2013-10-03T22:59:53.487 に答える