给每个a标签title加样式
原理是判断每个a标签是否有title属性,如果有获取title内容,然后移除title,新建一个title添加设置位置和标签样式和id,鼠标悬浮显示,移走移除这个标签不显示,
暂时只在文章内容设置样式,
\blog\templates\detail.html
<script type="text/javascript">
$(function () {
var x = 0;
var y = 100;
var newtitle = '';
$('a').mouseover(function (e) {
if(this.title != ""){
newtitle = this.title;
this.title = '';
$('body').append('<div id="mytitle" >' + newtitle + '</div>');
{#alert(e.pageX+','+ e.pageY+"----"+x+','+y);#}
$('#mytitle').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y - 80 + 'px'),
'position': 'absolute',
'color': '#ffffff',
'max-width': '50%',
'font-size': '18px',
'padding': '4px',
'background': 'rgba(40, 40, 40, 0.8)',
'border': 'solid 1px #e9f7f6',
'border-radius': '5px',
}).show();
$(this).mouseout(function () {
this.title = newtitle;
$('#mytitle').remove();
})
}
})
});
</script>
要想不跳转url设置#点击查看,和显示名字一样,多个#
本文作者: 永生
本文链接: https://yys.zone/detail/?id=158
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!
发表评论
评论列表 (0 条评论)
暂无评论,快来抢沙发吧!