在悬停时突出显示 div 并仅使用 css3 淡出其他 div

Question

当一个 div 在悬停时突出显示时，我正在尝试淡化其他 div。 我知道使用 jquery 可以做到这一点，但我想知道仅使用 css3 是否有可能。

我确实尝试在下面的代码中使用 jquery，但因为 div 从一开始就没有 .highLight 类，只有在悬停时，所有的 div 最终都会因为使用 .panel:not(.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>

Answer 1

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

#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

编辑

现在如果你想添加功能让非悬停的元素在你悬停时消失，你应该添加这个代码：

#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

Answer 2

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

Answer 3

我建议最简单的：

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

Answer 4

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

希望对你有帮助