用一个CSS事件更改两个元素的属性
问题描述:
所以有一件事我正在尝试做一个我正在做的网站(并且我不能使用Javascript来做到这一点)在屏幕右侧会出现一个箭头当用户将鼠标悬停在它上面时,会弹出一个小导航菜单。用一个CSS事件更改两个元素的属性
我正在考虑把样式放在样式里面,但那不是你可以在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:对不起,平庸的英文,林在解释的事情有点糟糕。
答
我希望我理解你的权利。下面是一个简单的例子:
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。
你的英语不是平庸的,它确实很体面。 –
@StephenLeppik谢谢,但我的意思是,我不是很善于清楚地解释事情 – Arszenik