html里设置选中过渡时间,HTML / CSS – 过渡选择器
写出来,这需要JavaScript中的这样的东西(没有任何库).
document.getElementById('inner_02').addEventListener("mouseenter", function(event) {
document.getElementById('inner_01').classList.add('newbkgnd');
});
document.getElementById('inner_02').addEventListener("mouseleave", function(event) {
document.getElementById('inner_01').classList.remove('newbkgnd');
});
document.getElementById('inner_03').addEventListener("mouseenter", function(event) {
document.getElementById('inner_01').classList.add('newbkgnd');
document.getElementById('inner_02').classList.add('newbkgnd');
});
document.getElementById('inner_03').addEventListener("mouseleave", function(event) {
document.getElementById('inner_01').classList.remove('newbkgnd');
document.getElementById('inner_02').classList.remove('newbkgnd');
});
/* make the divs visible initially. Just for debugging purposes */
#wrapper > div {
width: 20em; height: 2em;
margin:.5em 0;
border:1px solid;
/* Transition */
transition: background-color .5s;
}
#inner_01:hover ~ #inner_02,
#inner_01:hover ~ #inner_03,
#inner_02:hover ~ #inner_03,
.newbkgnd {
/* Color */
background-color: #ffee00;
}
编辑：或者,当然,基于@ nicael的答案,这个更简单的CSS解决方案……
/* make the divs visible initially. Just for debugging purposes */
#wrapper > div {
width: 20em; height: 2em;
margin:.5em 0;
border:1px solid;
/* Transition */
transition: background-color .5s;
}
#wrapper:hover > div {
/* Color */
background-color: #ffee00;
}
#wrapper:hover > div:hover {
background-color: inherit;
}