要调整当前项目的唯一选择器是：

#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，并设置浅色背景色。
所以hover只是触发器，在本例中，hover之后的元素才是真正要使用的元素。

Example
编辑

如果你想添加一个函数，让非悬停元素在你悬停时消失，你应该添加以下代码：

#areas:hover > div:not(:hover) > .panel
{
    opacity: 0; 
    
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

我使用:not()选择器来排除：hover伪类。
所以在本例中，#area是触发器，div是排除器，.panel是将受到影响的实际元素。

jsFiddle

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

简单来说，我建议：

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

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

联系我们

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

希望这对你有帮助