私は作っているウェブサイトにしようとしていることがあります(これはJavascriptを使用できません)。画面の右側に矢印がありますユーザーがその上を移動すると、小さなナビゲーションメニューが表示されます。1つのCSSイベントで2つの要素の属性を変更する
私はスタイリングをスタイリングの中に入れようと考えていましたが、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:平凡な英語のため申し訳ありませんが、物事を説明するのイムちょっと悪いです。
あなたの英語は普通ではありませんが、実際はかなりまともです。 –
@StephenLeppikありがとう、しかし、私が意味したことは、物事をはっきりと説明することがあまり良くないことです。 – Arszenik