1つのCSSイベントで2つの要素の属性を変更する

Question

私は作っているウェブサイトにしようとしていることがあります（これはJavascriptを使用できません）。画面の右側に矢印がありますユーザーがその上を移動すると、小さなナビゲーションメニューが表示されます。

私はスタイリングをスタイリングの中に入れようと考えていましたが、CSSでできることではないので、ホバーイベントを2つの要素の属性に変更する方法は分かりません。

これは現時点でのものです。

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。