css中hover控制其他元素只能控制这个元素身后的元素,想要控制其之前的元素,还需用js写
<script type="text/javascript">
/*————展览区:hover控制左边元素————*/
var img = document.getElementsByClassName("right"); //获取class为right的对象集合
var img2Left = img[2].scrollLeft; //获取img[2]即第三张图片的左坐标
var img3Left = img[3].scrollLeft; //获取img[3]即第四张图片的左坐标
var yidong1 = 50; //定义移动的距离
var yidong2 = 90;
//为img(右边第四张图片)注册鼠标进入事件
img[3].onmouseover = function () {
img2Left -= yidong1; //改变img2Left来达到平移的目的(左移)
img3Left -= yidong2;
img[2].style.left = img2Left + "px"; //onmouseover鼠标进入第四张图片,第三张图片左移指定的位置
img[3].style.left = img3Left + "px";
};
//为img注册鼠标离开事件
img[3].onmouseout = function () {
img2Left += yidong1; //恢复原来的位置(右移)
img3Left += yidong2;
img[2].style.left = img2Left + "px"; //onmouseout鼠标离开第四张图片,第三张图片右移返回原来的位置
img[3].style.left = img3Left + "px";
};
</script>