Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.08.2013, 20:03
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Есть ли возможность сделать? (js+css)
Появление div в действии css - transition, а именно с display none , на block
Можно конечно реализовать через opacity, что получается, НО в opacity блок присутствует, хоть он и прозрачен.


Т.е. надо так

#div {
display:none;
transition: display 2s}

div.onmouseover = function() {
this.style.display='block'
}


Так не работает, див просто появляется, будто и нету анимации.
Ответить с цитированием
  #2 (permalink)  
Старый 31.08.2013, 23:30
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Интересно, как блок будет ловить .onmouseover, если ему по сути не выделено ни одного пикселя, при display:none?
http://jsfiddle.net/ArrFV/
А если какую-то область в невидимом состоянии выделите, то можно обойтись и без js: http://stackoverflow.com/questions/3...splay-property
Ответить с цитированием
  #3 (permalink)  
Старый 05.09.2013, 00:00
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Вы не поняли, я имел ввиду это

http://jsfiddle.net/ArrFV/9/

(наведите на "привет")

во второе ссылке не понял, делал с display и opacity, результат такой же, в случае с overlow не понял
Ответить с цитированием
  #4 (permalink)  
Старый 05.09.2013, 08:45
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от hoax
Вы не поняли, я имел ввиду это
Да как же Вас понять, если в топике намекается, что показываться/скрываться будет тот элемент, на который курсор предполагается наводить
Вот без js: http://jsfiddle.net/BETEPAH/xV7nx/
Ответить с цитированием
  #5 (permalink)  
Старый 06.09.2013, 16:35
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

а что значит #div + p ?
Ответить с цитированием
  #6 (permalink)  
Старый 06.09.2013, 16:51
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

и второй вопрос)
ну тут все равно блок не display : none и его можно выделить, т.е. он присутствует, и если бы на месте текста была картинка, ее бы при opacity 0 можно было "утащить за собой" при случайном клике
Ответить с цитированием
  #7 (permalink)  
Старый 06.09.2013, 16:53
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от hoax
а что значит #div + p ?
Показывает на абзац <p>, который идет следом за элементом с id="div"
Ответить с цитированием
  #8 (permalink)  
Старый 06.09.2013, 17:52
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

можно и прятать блок:
<style>
p, #div {
    background-color: #888;
    margin: 5px;
}
#div + p {
    position: absolute;
    left: -10000px;
    top: -10000px;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0;
}

#div:hover + p {
    position: static;
    opacity: 1;
}
</style>
<div id="div">привет</div>
<p id="poka">пока</p>
<p>адью</p>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #9 (permalink)  
Старый 07.09.2013, 17:38
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Сообщение от BETEPAH Посмотреть сообщение
Показывает на абзац <p>, который идет следом за элементом с id="div"
можно подробную инфу ссылку об этом, не могу найти(
Ответить с цитированием
  #10 (permalink)  
Старый 07.09.2013, 20:17
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Сообщение от hoax
можно подробную инфу ссылку об этом, не могу найти(
На слово не верите, значит?
http://htmlbook.ru/samcss/sosednie-selektory
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jquery, js, html, css спеца. AlexBell Работа 41 23.11.2012 08:20
JS + CSS Под загрузка фонового изображения XboxPro Элементы интерфейса 0 14.11.2012 11:16
Есть ли для JS удобная среда разработки с подсветкой синтаксиса? mbp64 Общие вопросы Javascript 5 05.10.2012 11:21
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
Не могу сделать редирект в JS alpar_andr Общие вопросы Javascript 11 25.09.2008 22:31