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中定义它。

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

1 个答案: