Картинка+transition и data-content
использую вот такое дополнение для Bootstrap ..
https://silviomoreto.github.io/boots...tomize-options даю в параметр data-content картинку с ефектом transition а оно не работает... (когда вне- работает) <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <style> .img-zoom { width: 50px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; } .transition { -webkit-transform: scale(2); -moz-transform: scale(2); -o-transform: scale(2); transform: scale(2); }</style> <script> $(function(){ $('.img-zoom').hover(function() { $(this).addClass('transition'); }, function() { $(this).removeClass('transition'); }); }); </script> <select class="selectpicker"> <option data-content="<img class='img-zoom' src='http://www.wispresort.com/images/more_difficult.jpg'>">Relish</option> <option data-content="<img class='img-zoom' src='http://www.wispresort.com/images/more_difficult.jpg'>">Relish2</option> </select> |
Цитата:
|
Цитата:
Зашибись придумка. Нет товарищ, ты даешь в data-content - текст задания, которое никто не выполняет в твоих кодах. То есть из data-content кто-то еще должен достать текст и воткнуть его в дом, чтобы там появился узел img с классом img-zoom и только тогда что-то увидишь. А когда увидишь, то поймешь, что на ховер не нужны скрипты, просто допиши правило на ховер в css .img-zoom:hover {/* тут все что у тебя в transition */ То есть ты вообще в другую сторону уехал. |
прикрутил пример на jsfiddle.net
https://jsfiddle.net/core18/f7ttL9yt/1/ |
core,
вам css правила нужны а не скрипт |
Цитата:
|
А, там бутсрап густую кашу варит. Ну так вот, найди в инспекторе эту картинку внутри каши и включи режим hover и увидь, что все увеличивается как и предусмотрено стилями. А почему не увеличивается - задавай вопрос генераторам этой каши.
|
Часовой пояс GMT +3, время: 22:17. |