在多个 Div ID 上显示 CSS 过渡(例如:#box:悬停 + #display)

使用：hover 时有什么方法可以显示多个 CSS 过渡吗？

如果您查看此示例，我认为更容易理解我想要做什么：

<head>
<style>
#box{position:absolute;
width:50px;
height:50px;
background-color:grey;
-webkit-transition: 0.3s;
transition: 0.3s;}
#box:hover + #display 
{background-color:lightgreen;
visibility:visible;
-ms-transform:scale(2);
-webkit-transform:scale(1.1);
transform:scale(1.1);}  
#display
{position:absolute;
top:80px;
height:300px;
width:500px;
visibility:hidden;
-webkit-transition: 0.3s;
transition: 0.3s;}
</style>
</head>
<body>
<div id="box">
</div>
<div id="display">
</div>  
</body>

是的，您可以显示多个转换....我在这里创建了一个小提琴...http://jsfiddle.net/vAT38/.这里的关键是当你有一个转换时，CSS 将执行最后一个写入的命令。所以而不是写作..

transform:scale(1.1);
transform:rotate(7deg);

你必须在一行中给出它，比如...

transform: scale(1,1) rotate(7deg)

斯里我只是使用缩放和旋转作为示例。希望这有帮助

这次的另一个更新是 3 个 TRNSFORMS...http://jsfiddle.net/vAT38/1/

相关内容

最新更新

热门标签：