Изменение атрибутов двух элементов с одним событием CSS

Question

Итак, есть вещь, которую я пытаюсь сделать для веб-сайта, который я создаю (и я не могу использовать Javascript для этого), где в правой части экрана будет стрелка и когда пользователь нахмурится, появится небольшое навигационное меню.

Я думал о том, чтобы укладывать стиль внутри стилей, но это не то, что вы можете сделать в CSS, поэтому я не знаю, как это сделать: событие hover меняет атрибуты двух элементов.

Это то, на что похоже на данный момент.

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: Извините за посредственным английский язык, Im любопытных плохо объяснить вещи.

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.