vue裡面修改title樣式

雪莉06發表於2024-03-12
Vue

今天遇到一個需求：
滑鼠滑過一個模組，提示框會隨著滑鼠移動而移動
標籤的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>

相關文章