如何从 prettyPhoto 悬停中删除 <br>？

Question

在我的网站上，我有几个 prettyPhoto 画廊，我注意到在所有这些画廊中，当鼠标悬停在照片上时，都会显示照片的 "title" 标签。这包括一些 <br> 标签，这些标签随后会出现在悬停中，看起来很糟糕。我已经搜索并尝试了对 jquery 的一系列更改，但找不到修复方法。有谁知道如何从悬停中删除 <br> ？

html 的一个例子是：

<article class="span3 box3">
  <div class="thumb-pad4 maxheight">
    <div class="thumbnail">
      <figure><a href="img/p1.jpg" alt="job | Person 1" rel="prettyPhoto[gallery3]" title="
<br>
<br>
<br>
Person1 joined __ in 2015 as a ___.  In this role, ...
<br>
<br>
Person 1 graduated from ____ and wishes he were better at code> 
<img src="img/p1.jpg" alt="job | p1">
</a>
</figure>
  <div class="caption">
    <a href="#">Person 1<br>
Job Function</a>                                    
  </div>
 </div>
</div>
</article>

悬停时出现的是：

 <br>
 <br>
 <br>
Person1 joined __ in 2015 as a ___.  In this role, ...
<br>
<br>
Person 1 graduated from ____ and wishes he were better at code

Answer 1

尝试将 str.replace() 与正则表达式一起使用（没有它，您只会替换第一个匹配项。您需要 "greedy-regex"）

RegEx

例如：

<script>
    $('.my-class')
        .on('mouseenter', function() {
            var originalTitle = $(this).attr('title');

            $('.my-class').attr('data-original-title', originalTitle);
            $('.my-class').attr('title', title.replace(/<br>/g,''));
        })
        .on('mouseleave', function() {
            var originalTitle = $(this).attr('data-original-title');

            $('.my-class').attr('title', originalTitle);
        });
</script>

Answer 2

PrettyPhoto 使用 title 属性在您单击或悬停在照片上时为照片添加说明。

您需要向页面添加一些 CSS，以便在 "click mode" 中显示标题时在标题上方和下方增加间距。通过查看 prettyPhoto 的工作原理，标题文本被放在 div 和 class="pp_description" 中。

因此，从您的 HTML 中删除所有 <br> 标签，然后 添加 CSS 规则:

.pp_description {
    margin-top: 3em;
    margin-bottom: 2em;
    /* line-height: 3em; if you want spacing between each line of text in the caption */
}

如何从 prettyPhoto 悬停中删除 <br>？

How to remove <br> from prettyPhoto hover?

javascript

jquery

html

css

prettyphoto