Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Картинка+transition и data-content (https://javascript.ru/forum/misc/64417-kartinka-transition-i-data-content.html)

core 09.08.2016 21:22

Картинка+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>

рони 09.08.2016 21:56

Цитата:

Сообщение от core
а оно не работает... (когда вне- работает)

:blink: а поподробнее? может некуда расширятся, смотрите css

warren buffet 10.08.2016 07:55

Цитата:

Сообщение от core
даю в параметр data-content картинку


Зашибись придумка. Нет товарищ, ты даешь в data-content - текст задания, которое никто не выполняет в твоих кодах. То есть из data-content кто-то еще должен достать текст и воткнуть его в дом, чтобы там появился узел img с классом img-zoom и только тогда что-то увидишь. А когда увидишь, то поймешь, что на ховер не нужны скрипты, просто допиши правило на ховер в css

.img-zoom:hover {/* тут все что у тебя в transition */


То есть ты вообще в другую сторону уехал.

core 10.08.2016 11:09

прикрутил пример на jsfiddle.net
https://jsfiddle.net/core18/f7ttL9yt/1/

рони 10.08.2016 11:37

core,
вам css правила нужны а не скрипт

core 10.08.2016 13:01

Цитата:

Сообщение от рони (Сообщение 424908)
core,
вам css правила нужны а не скрипт

убрал скрипт, прописал в CSS но немогу заставить блок- картинку быть поверх всего с помощью z-index

warren buffet 10.08.2016 23:05

А, там бутсрап густую кашу варит. Ну так вот, найди в инспекторе эту картинку внутри каши и включи режим hover и увидь, что все увеличивается как и предусмотрено стилями. А почему не увеличивается - задавай вопрос генераторам этой каши.


Часовой пояс GMT +3, время: 22:17.