2

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

我确实尝试在下面的代码中使用 jquery，但是因为 div 从一开始就没有类 .highLight 并且只有在悬停时，所有的 div 最终都会因为使用 .panel:not(.highLight) 而从一开始就淡出{不透明度：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>
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 以使其可见，但您也可以完全淡出它。
现在第二部分发生在您将 div 元素悬停在#area 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 是实际生效的元素。

jsFiddle

于 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

最简单的我建议：

/* 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 回答
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>

希望这可以帮助

于 2013-10-04T17:23:43.020 回答