1
http://jsfiddle.net/g2jdawrb/嵌套元素和背景
我的問題是特定的。我希望我的第一個背景圖像(花)平滑地出現在子元素的懸停上,並連續移動到第二塊的黃色區域。但我不知道如何構造代碼,它有可能嗎? 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";
}