小编Maë*_*lle的帖子

单击下拉菜单时箭头旋转 180 度

我有一个下拉菜单,当我点击它时,希望它右侧的箭头旋转 180 度!问题是我在 html 中设置了箭头,而不是在 javascript 中设置了箭头。但是我认为从 #navi 到 #navigation 时可能有一种方法可以将其放入 css 中。

这是我的代码

<script>
$(document).ready(function(){
  $("#navi").click(function(){
$("#navigation").slideToggle(500);
  });
});
</script>
Run Code Online (Sandbox Code Playgroud)
#navi{
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
 
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
 
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}

 
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
}
 
#navigationin a:hover{
box-shadow: inset 180px 0 0 0 {color:Wide sidebar …
Run Code Online (Sandbox Code Playgroud)

html javascript css rotation drop-down-menu

3
推荐指数
1
解决办法
9334
查看次数

CSS 旋转不居中

所以我有一个在悬停时旋转的圆圈,但它不居中,我不知道为什么(我确实添加了“transform-origin:center center”)而且,抱歉,我对CSS知之甚少,但是什么当有两个连续的选择器时,它是/意味着吗?

这是我的代码:

#welcome:hover #welcomeavatar{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;  
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
transform-origin : center center;
}

#welcome #welcomeavatar{
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  transform-origin : center center;
}
 
#welcome:hover #speechbubble{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all …
Run Code Online (Sandbox Code Playgroud)

html css rotation css-transitions

3
推荐指数
1
解决办法
1万
查看次数