用一个CSS事件更改两个元素的属性

Question

所以有一件事我正在尝试做一个我正在做的网站（并且我不能使用Javascript来做到这一点）在屏幕右侧会出现一个箭头当用户将鼠标悬停在它上面时，会弹出一个小导航菜单。

我正在考虑把样式放在样式里面，但那不是你可以在CSS中做的事情，所以我不知道如何做：悬停事件改变两个元素的属性。

这就是现在的样子。

HTML：

<div id="navigation"> 
    <img src="arrow.png" id="arrow" alt="Navigaton menu arrow"></img> 
    <div id="navcontent"> 
    <p class="nav"><a href="index.html#section1"> Section 1 </a> </p> 
    <p class="nav"><a href="index.html#section2"> Section 2 </a> </p> 
    <p class="nav"><a href="index.html#section3"> Section 3 </a> </p> 
</div> 
</div> 

CSS：

#arrow { 
opacity: 0.5; 
} 

#navigation { 
position: fixed; /* because menu must stay in the same place of the screen */ 
right: 2px; 
} 

#navcontent { 
/* ?? */ 
} 

#navigation:hover { 
-webkit-transition: translate (-50px,0px); 
-ms-transform: translate(-50px,0px); 
-webkit-transform: translate(-50px,0px); 
transform: translate(-50px,0px); 
} 

PS：对不起，平庸的英文，林在解释的事情有点糟糕。

Answer 1

我希望我理解你的权利。下面是一个简单的例子：

See example

HTML

<nav class="nav"> 
    <a href="index.html#section1"> Section 1 </a> 
    <a href="index.html#section2"> Section 2 </a> 
    <a href="index.html#section3"> Section 3 </a> 
</nav> 

CSS

.nav { 
    background: #eee; 
    position: fixed; 
    right: 0; 
    transform: translate(100%,0); 
    transition: transform .5s; 
    width: 150px; 
} 

.nav:hover { 
    transform: translate(0,0); 
} 

.nav:before { 
    content: ""; 
    opacity: 0.5; 
    width: 40px; 
    height: 40px; 
    background: grey; 
    position: absolute; 
    transform: translate(-100%,0); 
    cursor: pointer; 
} 

.nav:after { 
    content: "\279C"; 
    display: table; 
    font-size: 30px; 
    position: absolute; 
    left: -20px; 
    top: 20px; 
    transform: translate(-50%,-50%) rotate(180deg); 
} 

.nav:hover:after { 
    transform: translate(-50%,-50%) rotate(0); 
} 

.nav a { 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
    color: #999; 
} 

.nav a:hover { 
    background-color: #ddd; 
} 

如果你真的需要一个图像触发，你可以在定义这个css。