如何删除<br>从prettyPhoto悬停

How to remove <br> from prettyPhoto hover?

本文关键字：gt br prettyPhoto 悬停 何删除 lt 删除      更新时间：2023-09-26

在我的网站上，我有几个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

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

当页面在"点击模式"下显示时，您需要在页面上添加一些CSS，在标题上方和下方添加间距。从prettyPhoto的工作原理来看，标题文本被放在带有class="pp_description"的div中。

因此，从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 */
}

尝试使用带有正则表达式的str.replace()（如果没有它，您只会替换第一个匹配项。您需要一个"贪婪正则表达式"）

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>
相关文章：