マウスオーバーでテキストを表示するコードを適用しました。しかし、小さな画面のフォントサイズが小さくなりました。しかし、私はサイズが同じままにしたいと高さ/幅のみを調整します

Question

以下は私のコードです。私はフォントサイズを増やそうとしましたが、うまくいきません。私はマウスのxとyの座標を上げようとしましたが、動きません。

$('.tooltipp').css('cursor','pointer'); 
$('.tooltipp').hover(function(){ 
var comment = $(this).attr('comment'); 
$(this).data('tipText', comment).removeAttr('comment'); 
$('<p class="HoverBlock"></p>') 
.css('display','none') 
.css('position','absolute') 
.css('border','1px solid #42bcb9') 
.css('background-color','#FFFFFF') 
.css('border-radius','5px') 
.css('padding','8px') 
.css('color','black') 
.css('box-shadow','1px 1px 10px #42bcb9') 
.css('width','auto') 
.html(comment) 
.css('font-size','21em !important') 
.appendTo('body') 
.fadeIn('slow'); 
}, function() { 
$(this).attr('comment', $(this).data('tipText')); 
    $('.HoverBlock').remove(); 
}).mousemove(function(e) { 
var mousex = e.pageX + 23; //Get X coordinates 
    var mousey = e.pageY + 12; //Get Y coordinates    
    var blockWidth = $(".HoverBlock").width();  
    var docWidth = $(window).width() 
if ((docWidth - mousex) < 325) 
     $('.HoverBlock').css({ top: mousey, left: e.pageX-300}); 
    else 
     $('.HoverBlock').css({ top: mousey, left: mousex}); 
}); 

Answer 1

!importantを削除すると機能するはずです。私はちょうどそれを試みたし、それは動作します。

あなたが!importantを使用する必要がなければ、あなたはこのようにそれを使用する必要があります。

.css('font-size','21em', 'important')