Question

我试图在鼠标进入＆amp ;;时添加过渡效果。退出一个盒子。 http://jsfiddle.net/q6jpjz65/6/

淡入＆amp; out转换效应将介于涉及.info1，.info2，.info3和＆amp;的每个div之间。 .headline。

我已经尝试将转换直接放在CSS以及带有.transition＆amp;的JS部分中。 .setAttribute。但即使不同的不透明，这些也不会导致过渡。

我也尝试应用它，就像它在这里一样，但是因为这涉及第三个div，即.headline div而被卡住了。 http://jsfiddle.net/q186sksn/

这是否可以使用过渡属性？或者没有，因为有很多层隐藏/取消隐藏事件？

    .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;
}

悬停后添加淡入/淡出

2 个答案: