html - DIV :hover, 显示 3 个，隐藏 3 个，标题 1 个

Question

我有 3 个标记为#box1、#box2 和#box3 的“主要”框。将鼠标悬停在任何一个框上应该会取消隐藏其各自的“隐藏”信息文本，标记为.info1、.info2、.info3。同时应该将其他框的不透明度更改为 0.2 并隐藏“.headline”。

我试图避免使用 Javascript，所以我尝试使用 CSS。

我环顾四周，发现了多个主题，但我无法理解为什么这不起作用:http://jsfiddle.net/q6jpjz65/1/

    .headline {
        display: block;
    }
    .info1 {
        display: none;
    }
    .info2 {
        display: none;
    }
    .info3 {
        display: none;
    }



    #box1, #box2, #box3 { 
        background-color:rgba(0,0,0,1.0);
        width: 1.92708%; 
        height: 3.7871%;
        position: absolute;
        border: 1px solid white;
        outline: 1px solid black;
        opacity: 1;
    }



    #box1:hover #box2 #box3 {
        opacity: 0.2; 
    }
    #box1:hover + .info1 {
        display: block;
        opacity: 1; 
    }
    #box1:hover + .headline {
        display: none;
        opacity: 1; 
    }


    #box2:hover #box1 #box3 {
        opacity: 0.2; 
    }
    #box2:hover + .info2 {
        display: block;
        opacity: 1; 
    }
    #box2:hover + .headline {
        display: none;
        opacity: 1; 
    }



    #box3:hover #box1 #box2 {
        opacity: 0.2; 
    }
    #box3:hover + .info3 {
        display: block;
        opacity: 1; 
    }
    #box3:hover + .headline {
        display: none;
        opacity: 1; 
    }


    <div class="headline">
    This text is always displayed when nothing is hovered.
    </div>
    <div id="box1" style="top: 10%">
        <div class="info1">
        Information for box1.
        </div>
    </div>
    <div id="box2" style="top: 30%">
        <div class="info2">
        Information for box2.
        </div>
    </div>
    <div id="box3" style="top: 50%">
        <div class="info3">
        Information for box3.
        </div>
    </div>

Answer 1

您可以尝试将所有内容包装在 wrap div 中，并根据它设置样式:JS Fiddle

HTML

<div class="wrap">
  <div class="headline">This text is always displayed when nothing is hovered.    
  </div>
  <div id="box1" style="top: 10%">
    <div class="info1">Information for box1.</div>
  </div>
  <div id="box2" style="top: 30%">
    <div class="info2">Information for box2.</div>
  </div>
  <div id="box3" style="top: 50%">
    <div class="info3">Information for box3.</div>
  </div>
</div>

CSS

.wrap:hover #box2, .wrap:hover #box3, .wrap:hover #box1{
  opacity: 0.2;
}
.wrap:hover .headline {display: none;}
#box1:hover, #box2:hover, #box3:hover {opacity: 1 !important;}

没有 JS 的主要问题是要隐藏标题，如果您将鼠标悬停在标题上，它也会隐藏，因为它必须包裹在应用悬停事件的元素内。

推荐使用 Javascript。