嵌套元素和背景

我的問題是特定的。我希望我的第一個背景圖像（花）平滑地出現在子元素的懸停上，並連續移動到第二塊的黃色區域。但我不知道如何構造代碼，它有可能嗎？ JsFiddle鏈接在上面。

HTML：

<div id="cont"> 
    <div class="background background1"> 
     <div class="block block1"> 
     </div> 
    </div> 
    <div class="background background2"> 
     <div class="block block2">  
     </div> 
    </div> 
</div>

CSS：

div#cont { 
position: absolute; 
top: 50px; 
left: 150px; 
width: 300px; 
height: 200px; 
border: 1px solid black; 
} 

div.background { 
    position: absolute; 
    width: 200px; 
    height: 100%; 
} 

div.background1 { 
    left: 50px; 
    background: url("http://t1.gstatic.com/images?q=tbn:ANd9GcTQ3f9u43Q8JvUhsrNoQzN4RSk3FdeC-p4bLn64f9hLg8ebQqDJ"); 
} 
div.background2 { 
    left: 150px; 
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcSIlqHe8rLgTYFQt3Dg-gqf-Z1psCs_TgZzJGsofdA1pg8UbMZiGg"); 
} 

div.block { 
    position: absolute; 
    width: 100px; 
    height: 100%; 

    transition: width 0.5s; 
} 

div.block1 { 
    background-color: red; 
} 
div.block2 { 
    background-color: yellow; 
} 

div.block:hover { 
    width: 200px; 
    background-color: transparent; 
}

的Javascript：

var block = document.getElementsByClassName("block1"); 

block[0].addEventListener('mouseover', addHover, false); 
block[0].addEventListener('mouseout', removeHover, false); 

function addHover() { 
    this.parentNode.style.zIndex = 1; 

    this.style.zIndex = 1; 
    document.getElementsByClassName("block2")[0].style.zIndex = 2; 
} 

function removeHover() { 
    this.parentNode.style.zIndex = "auto"; 
}

來源

2014-10-07 PawlikDoc

我們需要申請「溢出：隱藏」屬性，並添加另一個HTML元素是這樣的：

http://jsfiddle.net/tt0p77kv/1/

HTML：

<div id="cont"> 
    <div class="block block1"> 
     <div class="background"></div> 
     <div class="door"></div> 
    </div> 
    <div class="block block2"> 
     <div class="background"></div> 
     <div class="door"></div> 
    </div> 
</div>

CSS：

div#cont { 
    position: absolute; 
    top: 50px; 
    left: 150px; 
    width: 300px; 
    height: 200px; 
    border: 1px solid black; 
} 

div.block { 
    position: absolute; 
    width: 100px; 
    height: 100%; 
    overflow: hidden; 

    transition: width 0.5s; 
} 

div.block1 { 
    left: 50px; 
} 

div.block2 { 
    left: 150px; 
} 

div.door { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 

div.block1 div.door { 
    background-color: red; 
} 

div.block2 div.door { 
    background-color: yellow; 
} 

div.background { 
    position: absolute; 
    width: 200px; 
    height: 100%; 
} 

div.block1 div.background { 
    background: url("http://t1.gstatic.com/images?q=tbn:ANd9GcTQ3f9u43Q8JvUhsrNoQzN4RSk3FdeC-p4bLn64f9hLg8ebQqDJ"); 
} 

div.block2 div.background { 
    background: url("http://t3.gstatic.com/images?q=tbn:ANd9GcSIlqHe8rLgTYFQt3Dg-gqf-Z1psCs_TgZzJGsofdA1pg8UbMZiGg"); 
} 

div.block:hover { 
    width: 200px; 
    z-index: 1; 
} 

div.block:hover div.door{ 
    background-color: transparent; 
}

來源

2014-10-07 20:55:53 PawlikDoc

嵌套元素和背景

回答

相關問題