使用单个 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: 对不起，我的英语很一般，我有点不善于解释。

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: "9C";
  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中定义它。

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

Changing attributes of two elements with a single CSS event

html

css

events

styling