将鼠标悬停在div2上时如何更改div1的图像？

Question

我一直在试图代码这个矿的tumblr页和我目前停留在链接部分。 我希望将鼠标悬停在链接，“ HOME”，“ ASK”等上方时更改边栏图像。是否可以在不使用JavaScript的情况下进行操作？ 我已经用谷歌搜索过，但是我无法提出解决方案，尝试添加其他图像类，等等。我所能做的就是在链接下显示图像。 我在下面的页面中添加了侧边栏和链接代码。 提前致谢！

#sidebar {
    position:fixed;
    width:203px;
    top:70px;
    left:70px;
    height:auto;
    padding:15px;
    background-color:#1c1c1c;
}

#sidebarimg img {
    width:203px;
    padding-bottom:5px;
}

#links {
    width:203px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    font-family:times;
    text-align:center;
    text-transform:uppercase;
    opacity:2;
}

#links a {
    margin-top:1px;
    margin-bottom:2px;
    border:1px solid #fff;
    width:98px;
    display:inline-block;
    color:#999999;
    padding-top:5px;
    padding-bottom:5px;
    font-size: 13px;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

#links a:hover {
    background:#fff;
    color:#000;
    -moz-transition-duration:0.8s;
    -webkit-transition-duration:0.8s;
    -o-transition-duration:0.8s;
}

<div id="sidebar">
<div id="sidebarimg"><img src="{image:sidebar}"></div>

<div id="links">
<a href="{text:Link 1}">{text:Link 1 Text}</a>
<a href="#?w=500" rel="box1" class="poplight">ASK</a>
<a href="#?w=300" rel="box2" class="poplight">MY EDITS</a>
<a href="{text:Link 4}">{text:Link 4 Text}</a>
</div>

编辑：感谢您的帮助！

Answer 1

不，这是不可能的。 您只能基于CSS悬停行为基于其悬停状态或选择器中的较高标识符之一来更改元素。

您可以使用相邻和通用的同级选择器来“作弊”一点，但不能完全去掉DOM树的不同部分。

这是两种情况的示例，其中元素的悬停会影响另一个元素的渲染：

 div { border:1px solid black; padding:5px; } div:hover button:first-of-type { background:red; } button:hover + button { background:red; } 

 <div> <p>The first button will highlight when you mouse into the container. The second button will highlight when you hover over the first. <button>Button 1</button><button>Button 2</button> </div> 

在所有更复杂的情况下，您都需要Javascript。

Answer 2

您可以在链接中添加:after伪元素。

然后，伪元素可以绝对位于链接上方。

然后为每个链接应用不同的背景图像。

看到这个jsFiddle

#links a:after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 200px;
    height: 200px;
}

#links a:nth-child(1):hover:after {
    background-image: url('...');
}