Showing CSS Transitions on multiple Div IDs (example: #box:hover + #display)

StackOverflow https://stackoverflow.com/questions/22850687

  •  27-06-2023
  •  | 
  •  

题

Is there any way you can show multiple CSS Transitions when using :hover?

I think its easier to understand what i'm trying to do if you look at this example: 

<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>
有帮助吗？

解决方案

yes you can show multiple transforms .... i have created a fiddle here ... http://jsfiddle.net/vAT38/ . the key here is when u have a transform the css will execute the last written command. so instead of writing..

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

you have to give it in a single line like...

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

sry i just used scale and rotate as example. hope this helps

another update this time with 3 trnsforms... http://jsfiddle.net/vAT38/1/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top