Как обернуть текст заголовка изображения в div и показать этот блок при наведении?

Question

Сделал такую разметку:

<div class="packery-image-wrapper col-md-4 item animated fadeInRight">
    <a href="/">
        <img class="someClass" title="flat" src="http://here.com/img" alt="flat" width="629" height="800">
    </a> 
</div>

Стили:

.packery-image-wrapper{
    ...
   position: relative;
   ...
}  
.packery-image-wrapper .caption{
    ...
    position: absolute;
    ... etc.
}

И я хочу получить заголовок изображения и создать всплывающую подсказку с ним, используя такой код:

$(document).ready(function () {
   $(".packery-image-wrapper").on("mouseenter",function () {
   var captionContent = $(this).find('a img').attr("title");
   $(captionContent).wrap('<div class="caption"></div>').appendTo('.packery-image-wrapper a').show();
   }).on("mouseleave", function () {
       $(".caption").hide();
});

});

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

jquery

0

Zeihlis 8 Окт 2014 в 15:13

Answer 1

Проблема в том, что вы передаете заголовок методу jQuery(), поскольку он не начинается с <, он будет рассматриваться как селектор, поэтому $(captionContent) не вернет ни одного элемента. Вместо этого вам нужно создать div и установить captionContent в качестве его текста

$(".packery-image-wrapper").on("mouseenter", function() {
  var $caption = $(this).find(".caption");
  if (!$caption.length) {
    var captionContent = $(this).find('a img').attr("title");
    $('<div class="caption"></div>').html(captionContent).appendTo($(this).find('a'))
  }
  $caption.show();
}).on("mouseleave", function() {
  $(this).find(".caption").hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="packery-image-wrapper col-md-4 item animated fadeInRight">
  <a href="/">
    <img class="someClass" title="flat" src="//placehold.it/64" alt="flat" />
  </a>
</div>

0

Arun P Johny 8 Окт 2014 в 15:22

Да, только что заметил эту проблему, когда помещал ее в jsfiddle... Удалил неверный ответ (несмотря на голосование) :)

–

Gone Coding

8 Окт 2014 в 15:25

Также нам нужно проверить, добавлена ли уже подпись, если да, то нет необходимости делать это снова

–

Arun P Johny

8 Окт 2014 в 15:26

В самом деле ... переписывал все это, когда появился ваш ответ :)

–

Gone Coding

8 Окт 2014 в 15:27

Answer 2

Вот простая демонстрация.

$(".someClass").on('mouseover', function(e){
    if($(".customTitle").length)
        $(this).parent().siblings('.customTitle').show();
    else {
        $(this).parent().after($('<div />', { text: $(this).attr('title'), class: 'customTitle', 
                                             css: { top: $(this).parent().offset().top - 100, 
                                                   left: $(this).parent().offset().left} }));
    }
}).on('mouseout',function(e){
    $(this).parent().siblings('.customTitle').remove();
});

0

aleha 8 Окт 2014 в 15:33

Как обернуть текст заголовка изображения в div и показать этот блок при наведении?

2 ответа

Похожие вопросы

Новые вопросы

jquery