今天遇到一个需求：
鼠标滑过一个模块，提示框会随着鼠标移动而移动
标签的title属性具有这个效果，但是标签title的默认样式太丑
<template>
<div class=".item-title" title="点击查看详情"></div>
</template>
前提：安装jquery 然后再导入
import $ from jquery
mounted()｛
$(function () {
var x = 10;
var y = 20;
var newtitle = '';
$('.item-title').mouseover(function (e) {
newtitle = this.title;
this.title = '';
$('body').append('<div class="mytitle" >' + newtitle + '</div>');
$('.mytitle').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y - 80 + 'px')
}).show();
}).mouseout(function () {
this.title = newtitle;
$('.mytitle').remove();
}).mousemove(function (e) {
$('.mytitle').css({
'left': (e.pageX + x +10 + 'px'),
'top': (e.pageY + y - 60 + 'px')
}).show();
})
});
｝
<style>
.mytitle{
position: absolute;
color: #fff;
font-size: 14px;
padding: 4px;
background: red;
z-index: 999;
}
</style>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。