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();
});

}）;

在这里，我可以获得图像标题，我可以将其输出到控制台，但之后没有任何反应。

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>

Answer 2

这里很简单demo。

$(".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();
});

如何将图像标题文本包装成div并在悬停时显示此块？

2 个答案: