javascript - une boîte de dialogue s'affichera lorsque la souris bouge ou reste sur la page-js tutoriel-php.cn

javascript - une boîte de dialogue s'affichera lorsque la souris bouge ou reste sur la page

php是最好的语言

Libérer： 2018-08-06 10:19:24

original

3168 Les gens l'ont consulté

La boîte de dialogue s'affichera lorsque la souris se déplacera vers le contenu masqué, et elle sera toujours affichée lorsque la souris restera sur la boîte de dialogue. La boîte d'invite disparaît lorsque la souris quitte la boîte d'invite et le contenu est masqué.

Lorsqu'elle est utilisée avec la zone de tableau, la largeur est fixe et les informations excédentaires qui dépassent la largeur sont affichées avec des points de suspension.

Définissez le CSS de la zone de tableau sur

table-layout: fixed;
word-break: break-all;

Copier après la connexion

Les caractères supplémentaires sont affichés sous forme d'ellipses :

.hideMore {
    width:60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Copier après la connexion

Instructions pour la méthode utilisée lors de l'affichage de la boîte d'invite :

1. La méthode délégué() ajoute un ou plusieurs gestionnaires d'événements à l'élément spécifié (un élément enfant de l'élément sélectionné) et spécifie la fonction à exécuter lorsque ces événements se produisent.

Les gestionnaires d'événements utilisant la méthode délégué() s'appliquent aux éléments actuels ou futurs (tels que les nouveaux éléments créés par des scripts).

2. La méthode setTimeout() est utilisée pour appeler une fonction ou calculer une expression après un nombre spécifié de millisecondes.

<body>
<table>
//表格内多余的seat将被用省略号来显示
//鼠标移动到这里将显示提示框提示内容(可以自定义)
<td class="hideMore"><span alert-content="$!{policy.seat}">$!{policy.seat}</span>
<table>
<body>

Copier après la connexion

javascript代码：
  
$(function () {

var tableShow = null;
            var tipShow = null;
            var delayTime = 200;
             //离开至表格隐藏tip
            $("body").delegate("span", "mouseleave", function () {
                tipShow = setTimeout(function () {
                    $(&#39;[data-ui="alert-layer"]&#39;).remove()
                }, delayTime)
            });
                    //移动至表格显示tip
                    $("body").delegate("span", "mouseover", function () {
                        var seat = $(this);
                        tableShow = setTimeout(function () {
                            showTip(seat)
                        }, delayTime)
                    });
            //在tip上继续显示
            $("body").delegate(&#39;[data-ui="alert-layer"]&#39;, "mouseover", function () {
                clearTimeout(tipShow)
            });
                    //离开tip隐藏
                    $("body").delegate(&#39;[data-ui="alert-layer"]&#39;, "mouseleave", function () {
                        tipShow = setTimeout(function () {
                            $(&#39;[data-ui="alert-layer"]&#39;).remove()
                        }, delayTime)
                    });
            //予以显示
            function showTip(seat) {
                var content = seat.attr("alert-content");
                var position = {
                    top: seat.offset().top + seat.height(),
                    left: seat.offset().left-3,
                    index: 9999
                };
                var content = "<p data-ui=\"alert-layer\" class=\"more-seat\"><p class=\"bg\"></p>"+content+"</p>";
                $(&#39;[data-ui="alert-layer"]&#39;).length || ($("body").append(content),
                        $(&#39;[data-ui="alert-layer"]&#39;).css(position))
            }
})

Copier après la connexion

//显示 提示框p的CSS样式
.more-seat {
        white-space: nowrap;
        color: #566c7e;
        position: absolute;
        z-index: 99999;
        background: #f8fcff;
        line-height: normal;
        border: 1px solid #c3d5e3;
        padding: 14px 16px;
        cursor: default;
        font-family: verdana;
    }

Copier après la connexion

Exemple d'utilisation :

javascript - une boîte de dialogue saffichera lorsque la souris bouge ou reste sur la page

La technologie et les méthodes utilisées ne sont pas très avancées, le maître peut laisser des suggestions.

Articles associés :

Mouvement de la souris JS pour afficher le code de l'effet d'image dans les effets spéciaux title_Image

Passez la souris pendant trois secondes Affichez ensuite automatiquement le code js de la grande image

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

javascript - une boîte de dialogue s'affichera lorsque la souris bouge ou reste sur la page