1

div {   
  background-color: red;
  height: 100px;
  width: 100px;
  transition: transform 2s;                
}
div:hover {
  transform: rotateY(180deg);                               
}
<DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>        
        <div></div>
    </body>        
</html>
    

Есть блок, хотелось бы сделать, чтобы при наведении мышки он крутился, и когда мышка уходит с его начального состояния, крутился обратно. Проблема в том, что когда он начинает крутиться, его края сдвигаются, и даже если мышка не двигалась, она находится уже не над ним, и, видимо, происходит mouseover(). Как можно решить эту проблему?

4
  • а код можете выложить
    – Sergalas
    13 мар 2016 в 19:00
  • Выложите пожалуйста код. Кроме css что-то можно использовать?
    – newman
    13 мар 2016 в 19:23
  • @newman нет, только css
    – Юрий
    13 мар 2016 в 19:42
  • @Sergalas выложил
    – Юрий
    13 мар 2016 в 19:42

1 ответ 1

3

Можно попробовать так.

Т.е. основная идея в том что реагирует на наведение курсора внешний элемент, а крутиться внутренний.

div {   
  height: 100px;
  width: 100px;
  transition: transform 2s;                
}
div > div {
 background-color: red;
}
div:hover > div {
  transform: rotateY(180deg);                               
}
<DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>        
        <div><div></div></div>
    </body>        
</html>
    

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.