Question

我一直在尝试对我的this tumblr页面进行编码，而我目前仍然在链接部分停留。当我将鼠标悬停在我的链接上时，我希望我的侧边栏图像发生变化，＆＃34; HOME＆＃34;，＆＃34; ASK＆＃34;是否可以在不使用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悬停行为更改元素。

你可以欺骗＆＃39;稍微使用相邻和一般的兄弟选择器，但不要使用DOM树的完全不同的部分。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

在所有更复杂的情况下，您都需要使用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('...');
}

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

2 个答案: