添加淡出/淡出后悬停

Question

我想添加一个过渡效果，每当鼠标进入&退出一个框。http://jsfiddle.net/q6jpjz65/6/

渐入&我们的过渡效果是在每个div之间，包括。info1，。info2，。info3， &.headline .

我试过把过渡直接放在CSS以及在JS部分与。transition &.setAttribute。但是，即使使用不同的不透明度，也不会导致过渡发生。

我也试图像这里一样应用它，但是因为这涉及到第三个div，。headlinediv. http://jsfiddle.net/q186sksn/

是否可以使用transition属性?或者没有，因为有这么多图层隐藏/取消隐藏事件?

    .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>
    document.getElementById("box1").onmouseover = function() {
        document.getElementsByClassName("headline")[0].style.display = "none";
        document.getElementsByClassName("info1")[0].style.display = "block";
        for(var i=1; i<4; i++) {
            if(i != 1) document.getElementById("box"+i).style.opacity = "0.2";
            if(i == 1) document.getElementById("box"+i).style.opacity = "1";
        }
    }
    document.getElementById("box1").onmouseout = function() {
        document.getElementsByClassName("headline")[0].style.display = "block";
        document.getElementsByClassName("info1")[0].style.display = "none";
        for(var i=1; i<4; i++) {
            if(i != 1) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 2) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 3) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 4) document.getElementById("box"+i).style.opacity = "0.4";
        }
    }

    document.getElementById("box2").onmouseover = function() {
        document.getElementsByClassName("headline")[0].style.display = "none";
        document.getElementsByClassName("info2")[0].style.display = "block";
        for(var i=1; i<4; i++) {
            if(i != 2) document.getElementById("box"+i).style.opacity = "0.2";
            if(i == 2) document.getElementById("box"+i).style.opacity = "1";
        }
    }
    document.getElementById("box2").onmouseout = function() {
        document.getElementsByClassName("headline")[0].style.display = "block";
        document.getElementsByClassName("info2")[0].style.display = "none";
        for(var i=1; i<4; i++) {
            if(i != 1) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 2) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 3) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 4) document.getElementById("box"+i).style.opacity = "0.4";
        }
    }

    document.getElementById("box3").onmouseover = function() {
        document.getElementsByClassName("headline")[0].style.display = "none";
        document.getElementsByClassName("info3")[0].style.display = "block";
        for(var i=1; i<4; i++) {
            if(i != 3) document.getElementById("box"+i).style.opacity = "0.2";
            if(i == 3) document.getElementById("box"+i).style.opacity = "1";
        }
    }
    document.getElementById("box3").onmouseout = function() {
        document.getElementsByClassName("headline")[0].style.display = "block";
        document.getElementsByClassName("info3")[0].style.display = "none";
        for(var i=1; i<4; i++) {
            if(i != 1) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 2) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 3) document.getElementById("box"+i).style.opacity = "0.4";
            if(i != 4) document.getElementById("box"+i).style.opacity = "0.4";
        }
    }

Answer 1

您是否在此JSFiddle中添加了如下css transition属性?我相信这是理想的效果(如果不是，请告诉我)。

在将transition: opacity 1s ease-in-out添加到css中并调整javascript后，似乎可以正常工作。

Answer 2

这不是要简单1000倍吗?http://jsfiddle.net/DIRTY_SMITH/a0my545L/4/

HTML

<div id="mypic"><img class="top" src="http://lorempixel.com/400/200/sports/" /></div>

CSS

div{width: 400px;}
#mypic {
  position:relative;
  max-width:100%;
}
#mypic img {
  position:absolute;
  left:0;
  opacity:0.2;
  -webkit-transition: opacity 2s ease-in;
  -moz-transition: opacity 2s ease-in;
  -o-transition: opacity 2s ease-in;
  transition: opacity 2s ease-in;
}
#mypic img.top:hover {
  opacity:1;
}