Question

当我在悬停时突出显示一个div时，我正试图淡化其他div。我知道这可以使用jquery，但我想知道是否可以使用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>

Answer 1

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

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

#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本身悬停时。仅为.panel设置css设置。在这种情况下，不透明度将设置为1，并将设置浅背景颜色。
因此悬停只是触发器，在它之后的元素将是实际使用的元素，在这种情况下。

<强> Example

修改

现在，如果您想要添加该功能，以便在悬停时让非悬停元素消失，您应该添加以下代码：

#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

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>

希望这有帮助

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

4 个答案: