Картинка+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, время: 06:17. |