CSS实现hover背景时切换两张人物图片位置的方案问询

纯CSS实现（无需JS，最简单） #

你可以直接用CSS的后续兄弟选择器~实现该需求，该选择器可以选中指定元素之后所有符合条件的同级兄弟元素，刚好匹配你当前的DOM结构（两个person图片都是background图片的后续同级元素）。
修改后的完整CSS代码如下：

.background {
    z-index: 1;
    /* 可选：如果需要hover触发区域更稳定，可以加display:block */
    display: block;
}
.person1 {
    position: relative;
    z-index: 2;
    right: 251px;
    bottom: 169px;
    /* 可选：加过渡动画让位置交换更丝滑 */
    transition: all 0.3s ease;
}
.person2 {
    position: relative;
    z-index: 2;
    right: 749px;
    bottom: 221px;
    /* 可选：加过渡动画让位置交换更丝滑 */
    transition: all 0.3s ease;
}
/* hover背景时交换两个元素的定位参数 */
.background:hover ~ .person1 {
    right: 749px;
    bottom: 221px;
}
.background:hover ~ .person2 {
    right: 251px;
    bottom: 169px;
}

注意事项 #

• 你之前修改无效大概率是没有写对hover关联的选择器，只有用兄弟/后代选择器才能实现hover一个元素修改另一个元素的样式
• 如果你的DOM结构后续调整，两个person图片不再是background的同级后续元素，纯CSS方案会失效，此时可以用JS方案

JS实现（兼容性更强，适合复杂结构） #

如果DOM结构不符合CSS选择器的匹配规则，可以用鼠标事件实现，在HTML的<body>末尾添加如下代码：

const bg = document.querySelector('.background');
const person1 = document.querySelector('.person1');
const person2 = document.querySelector('.person2');
// 鼠标移入背景时交换位置
bg.addEventListener('mouseenter', () => {
  person1.style.right = '749px';
  person1.style.bottom = '221px';
  person2.style.right = '251px';
  person2.style.bottom = '169px';
})
// 鼠标移出时恢复原位置
bg.addEventListener('mouseleave', () => {
  person1.style.right = '251px';
  person1.style.bottom = '169px';
  person2.style.right = '749px';
  person2.style.bottom = '221px';
})

内容的提问来源于stack exchange，提问作者Mical -