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