突出顯示div懸停和淡出其他div只使用css3

我試圖褪色其他divs時，一個div突出顯示懸停。我知道這是可能的使用jQuery，但我想知道是否可能只使用css3。突出顯示div懸停和淡出其他div只使用css3

我嘗試過使用下面的代碼使用jquery，但是因爲div 從頭開始沒有.highLight類，只有在懸停時，由於使用了.panel，所有div最終都從最開始淡出：不是（.highLight）{opacity：0.5;}

希望這是有道理的。

jQuery的

$('.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>

來源

2013-10-03 richard

沒有jsBin，沒有的jsfiddle :( – dezman

難道你們就不能只是這樣做：http://jsfiddle.net/Jf5AP/ – SombreErmine

這裏的[鏈接]（http://jsfiddle.net/ r1chyr1ch/5wyt5/7 /），現在想到所有這一切都突出顯示在哪裏，我試圖讓.panel突出顯示懸停和其他人褪色。@SombreErmine您的示例只顯示懸停狀態與 – richard

要調整當前項目的唯一選擇是：

#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以保持可見性，但您也可以完全淡化它。
現在，第二部分發生在將div元素懸停在#area div或當您懸停#area div本身時。 css設置只會被設置爲.panel。在這種情況下，不透明度將被設置爲1，並且將設置淺色背景色。
所以懸停只是觸發器，其後的元素將是實際使用的元素，在這種情況下。

Example

編輯

現在如果你想添加的功能，讓非徘徊的元素，只要鼠標懸停dissapear，您應該添加以下代碼：

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

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

我確實使用:not()選擇器來排除：hover pseuodo類。
因此，在這種情況下，#area是觸發器，div是排除器，.panel是將生效的實際元素。

jsFiddle

來源

2013-10-04 17:50:19 nkmol

工作正常，但我也試圖在突出顯示一個框的同時淡出其他框。 – richard

檢查我的更新以上:) – nkmol

嗨，我使用的代碼，它的工作。這裏是工作的鏈接。 http://jsfiddle.net/r1chyr1ch/5wyt5/15/我確實刪除了一個div，因爲我在

之前擁有它，但是現在我已將該課程移到

。 ** Thankyou ** – richard

這個怎麼樣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-03 22:57:20 Phil

當你在inbetween div與光標之間移動時，所有的div都會被淡出，仍然是由於＃區域上的不透明懸停狀態。@ phil我在這裏有一個演示來顯示我正在工作的內容。 /jsfiddle.net/r1chyr1ch/5wyt5/7/ – richard

我正在努力st懸停時突出顯示曲線框（.panel），其他部分淡出。 @Phil – richard

在最簡單的我建議：

/* 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 Fiddle demo。

在假設你想他們完全可見，直到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 Fiddle demo。

來源

2013-10-03 22:59:53

我認爲他想讓初始狀態變得完全不透明，直到其中一個徘徊 – Phil

@Phil：是的，同意;正如你所評論的那樣寫下來。 :) –

Thanky你的答覆。這確實有用，但是如果你將鼠標懸停在部分div上，當我需要它仍然是完全不透明的時候，它會全部淡出。 – richard

/// 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>

希望這有助於

來源

2013-10-04 17:23:43

突出顯示div懸停和淡出其他div只使用css3

回答

相關問題