Html 在多个Div id上显示CSS转换（示例：#box:hover+；#display）_Html_Css_Hover_Transitions

Html 在多个Div id上显示CSS转换（示例：#box:hover+；#display）

html css

Html 在多个Div id上显示CSS转换（示例：#box:hover+；#display）,html,css,hover,transitions,Html,Css,Hover,Transitions,在使用：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:lightg

在使用：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>


#方框{位置：绝对位置；
宽度：50px；
高度：50px；
背景颜色：灰色；
-webkit转换：0.3s；
转换：0.3s；}
#框：悬停+显示
{背景色：浅绿色；
能见度：可见；
-ms变换：尺度（2）；
-webkit转换：比例（1.1）；
变换：缩放（1.1）；}
#展示
{位置：绝对位置；
顶部：80px；
高度：300px；
宽度：500px；
可见性：隐藏；
-webkit转换：0.3s；
转换：0.3s；}

是，您可以显示多个变换。。。。我在这里创作了一把小提琴。这里的关键是，当你进行转换时，css将执行最后一个写入的命令。因此，与其写

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

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

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

sry我只是以缩放和旋转为例。希望这有帮助

这次又更新了3个trnsforms

谢谢，但我不是这个意思。我想灰色的“框”使动画和“显示”刚刚出现