下拉箭头翻转不了
hover的时候字体可以变大，但是transform:rotate(180deg) 不生效，是为什么
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="font/iconfont.css">
</head>
<body>
<!-- 最基础的下拉菜单样式 -->
<!-- <div class="dropdown">
<div class="dropdown-toggle">我的幕淘<i class="dropdown-arrow"></i></div>
<div class="dropdown-layer dropdown-left"></div>
</div> -->
<!-- data-active="menu" 这个的意思是添加一个自定义的属性和数据，
jQuery获取属性时只需.data('active') data-的前缀不需要加进去 -->
<!-- 使用 data-*属性来嵌入自定义数据： -->
<div class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle transition">我的慕淘<i class="dropdown-arrow iconfont"></i></a><!--  icon图标兼容ie6、ie7的写法 -->
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</div>
<div class="menu dropdown fl" data-active="menu">
<a href="###" target="_blank" class="dropdown-toggle transition">我的慕淘<i class="dropdown-arrow iconfont"></i></a>
<ul class="dropdown-layer dropdown-left">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</div>
<script src="js/jquery-1.7.1.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/index.js"></script>
</body>
</html>css
[class*='-active'] .dropdown-arrow{
font-size: 30px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.transition{
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}9
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星