div处于始终可见的扩展器时，div css悬停动画不起作用。 [英] Div css hover animation not working when div is in always visible extender.

问题描述

当div处于始终可见的扩展器时，Div css悬停动画不起作用。



我正在开发一个网页，我希望显示鼠标悬停时的一些动画效果div和我的div在alwys可见的扩展器下。

我正在使用div的css类，如下所述

。 divLeftClass  
 {
  background-color  ： 透明;  
  position  ： 绝对;  
} 
 
。 divLeftClass：悬停 
 {
  background-color  ： ＃FF2400;  
  position  ： 绝对值;  
 } 

它不在那里工作。当我尝试在简单的页面上使用它时，它正常工作。

希望我会得到正确的答案。

解决方案

你好，



请在下面的代码中查看您的问题。



< div class =box>< / div>

。 box  {
  width  ：  150px;  
  height  ：  150px;  
  background  ：  red;  
  margin-top  ：  20px;  
  margin-left  ：  auto;  
  margin-right  ： 自动;  
   -  webkit-transition  ：  background-color 2s easy-out;  
   -  moz-transition   ：  background-color 2s ease-out;  
   -  o-transition  < span class =code-keyword>：  background-color 2s ease-out;  
 过渡 ：  background-color 2s ease-out;  
} 
 
。框：悬停 {
  background-color  ：  green;  
  cursor  ： 指针;  
} 

使用您的代码查看演示...



http://jsfiddle.net/hardik4now/cPw86/ [ ^ ]

Div css hover animation not working when div is in always visible extender.

I am developing a web page i want to show some animated effect on mouse hover of div and my div is under alwys visible extender.
I am using css class for div as mentioned below

.divLeftClass
       {
           background-color: transparent;
           position: absolute;
       }

       .divLeftClass:hover
       {
           background-color: #FF2400;
           position: absolute;
       }

It is not working there. and when i tried using it on simple page it working correctly.
Hope i will get the right answer.

解决方案

Hello,

please check below code for your question.

<div class="box"></div>

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.box:hover {
  background-color: green;
  cursor: pointer;
}

See the demo with your code...

http://jsfiddle.net/hardik4now/cPw86/[^]

这篇关于div处于始终可见的扩展器时，div css悬停动画不起作用。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！