Question

在我的网站上，我有几个漂亮的照片画廊，我注意到，当鼠标悬停在照片上时，所有这些画廊中的标题都是＆＃34;照片的标签显示。这包括一些<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

当您点击或悬停在照片上时，PrettyPhoto使用属性xrange为照片添加标题。

当您在＆＃34;点击模式＆＃34;中显示时，您需要在页面中添加一些CSS，以便在标题上方和下方添加间距。从查看prettyPhoto的工作原理，标题文本放在title div内。

因此，请从HTML中删除所有class="pp_description"标记，然后添加CSS规则：

<br>

Answer 2

尝试将str.replace()与正则表达式一起使用（没有它只会替换FIRST匹配。你需要一个“贪婪的正则表达式”）

RegEx

e.g：

<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>

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

2 个答案: