CSS div переход; при наведении мыши, но не при наведении мыши?

Question

CSS div переход; при наведении мыши, но не при наведении мыши?

0

Я пытаюсь сделать изображение, у которого есть div, который исчезает при наведении мыши, но затем исчезает снова, когда мышь уходит. Я хочу, чтобы div, хотя и доходил до 50% изображения и имел в нем какой-то текст

Мне удалось разобраться в угасании, но как только мышь уходит, она не изящно исчезает, она просто исчезает...

Вот мой текущий код:

CSS

body { font-family: 'Jolly Lodger', cursive; width:800px; height:600px; margin:0px; padding:0px; }
#container { width:50%; height:100%; background-color:#0000ff; margin:0px; padding:0px; position:relative; text-align: center; overflow: hidden; }
popup { opacity:0; -webkit-transition: opacity 4s ease-out; }
popup:hover { opacity:0.6; }
pop { opacity:0; -webkit-transition: opacity 4s ease-out; }
pop:hover { opacity:1; }
#picture { max-height:100%; margin-left: -100%; } 
#container:hover popup { position:absolute; top:0; height:25%; width:100%; background-color:#00ff00; display:block; opacity: 0.6; padding:30px 0px 0px 0px; }
#container:hover pop { position:absolute; top:0; height:25%; width:100%; opacity: 1; display:block; padding:30px 0px 0px 0px; }

HTML

<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/db/Caneel_Bay_Free_Roaming_Wild_Donkeys.jpg" id="picture" />
<popup>&nbsp</popup>
<pop><p><font size="7">I fade!</font></p> <p>Fade in!</p></pop>
</div>

JSFiddle в действии: http://jsfiddle.net/jmKFv/

Я попытался поместить -webkit-переход: непрозрачность 4s в разных тегах, как и то, что я видел, советовали другие люди здесь, но похоже, что они там хотят работать. Если в другом пространстве он вообще не анимируется

Я не уверен, куда идти отсюда, любая помощь будет оценена

MysMelody 19 апр. 2014, в 21:37

Источник

Теги:

html

css

transition

2 ответа

Ещё вопросы

King King · Answer 1 · 2014-04-19T17-38-00.000Z

Ваша проблема кажется простой, но не совсем. Сканируя его, дайте мне знать, что вы сделали это неправильно. Причина, по которой ваша pop исчезла сразу после выхода из мыши, заключается не в том, что ее непрозрачность не анимируется/не переводится, а потому, что ее позиция выпрыгивает из поля зрения (и вы также устанавливаете overflow:hidden для контейнера). Другая проблема заключается в том, что у вашего popup есть popup фон transparent и непрозрачность 0, после выхода из мыши только непрозрачность анимируется, но фон переключается обратно (от green) на transparent сразу, поэтому он исчез без какого-либо обратного перехода.

Чтобы устранить проблему, вы должны настроить все свойства в нормальном состоянии ваших элементов, в состоянии зависания вам просто нужно изменить свойство, которое вы хотите оживить/применить переход (это свойство opacity), вот фиксированный код:

popup {  opacity:0; height:25%; width:100%; 
         background-color:#00ff00; 
         position:absolute; left:0; top:0;
         display:block; padding:30px 0px 0px 0px; z-index:1;
         -webkit-transition: opacity 4s ease-out; 
}
popup:hover { opacity:0.6; }
pop { opacity:0; height:25%; width:100%;
      position:absolute; left:0; top:0;
      display:block; padding:30px 0px 0px 0px;
      -webkit-transition: opacity 4s; }
pop:hover { opacity:1; }
#picture { max-height:100%; margin-left: -100%; } 
#container:hover popup { opacity: 0.6; } /* change only the opacity here */
#container:hover pop { opacity: 1; }    /* change only the opacity here */

Обновленная демоверсия

Спасибо за вашу помощь и объяснение проблемы, я вижу и понимаю, где я ошибся, я запутался в том, каков был конечный результат, поэтому написал все немного задом наперед. Еще раз спасибо за прояснение

pablopixel · Answer 2 · 2014-04-19T17-31-00.000Z

У вас есть проблемы с правилами CSS: вы присваиваете положение, высота, ширина, дисплей и т.д., чтобы popup и pop, когда мышь находится над #container, но единственное, что вы хотите изменить, когда мышь находится над #container - непрозрачность. Поэтому, когда мышь покидает контейнер, ваше popup и pop движутся, потому что их положение меняется, и вы не видите переход.

Чтобы это исправить, необходимо присвоить каждому свойству, но непрозрачность popup и pop, когда мышь не находится над #container:

#container popup { position:absolute; top:0; height:25%; width:100%; background-color:#00ff00; display:block;  padding:30px 0px 0px 0px; }
#container pop { position:absolute; top:0; height:25%; width:100%;  display:block; padding:30px 0px 0px 0px; }
#container:hover popup { opacity: 0.6; }
#container:hover pop {opacity: 1; }

Смотрите здесь в действии: http://jsbin.com/wacorevi/1/edit

Кстати, почему вы используете popup и pop теги вместо стандартных тегов HTML?

Спасибо за ваш ответ и объяснение, очень полезно :) Я использовал нестандартный, потому что я думал, что было бы лучше иметь раздел без предопределенных значений, чтобы я мог манипулировать им больше, но, глядя на то, что пошло не так, я вижу, как и что я должен использовать вместо