使用JS悬停工具提示

问题描述 投票:0回答:1

所以我用html制作了这张地图,当我将鼠标悬停在圆上时,我想在圆上显示“ Lina Garcia的图片,并显示一些文字(id =“ circulo-show”)。

我如何选择要使用jquery显示照片的位置?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gobierno Corporativo</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="./js/default.js"></script>
    <style>
        #lina-garcia {
            display: none;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("#miembro-ext-1").mouseover(function() {
                $("#lina-garcia").css("display", "block");

            });

            $("#miembro-ext-1").mouseout(function() {
                $("#lina-garcia").css("display", "none");
            });
        });
    </script>

</head>

<body>
    <div class="container">
        <img id="comite-inversiones" src="https://www.afiuniversal.com.do/Style%20Library/Images/gobierno-corporativo-chart.png" usemap="#mapa-comite">

        <map name="mapa-comite" class="mapa">
            <area target="" alt="" title="" href="" id="miembro-ext-1" class="seccion" coords="150,113,315,14" shape="rect">
            <area target="" alt="" title="" href="" id="miembro-ext-2" class="seccion" coords="342,13,499,118" shape="rect">
            <area target="" alt="" title="" href="" id="especialistas-1" class="seccion" coords="112,141,199,295" shape="rect">
            <area target="" alt="" title="" href="" id="especialistas-2" class="seccion" coords="453,139,542,300" shape="rect">
            <area target="" alt="" title="" href="" id="adm-fondo" class="seccion" coords="146,327,315,428" shape="rect">
            <area target="" alt="" title="" href="" id="especialistas-3" class="seccion" coords="342,329,494,428" shape="rect">
            <area target="" alt="" title="" href="" id="circulo-show" coords="326,222,114" shape="circle">
        </map>
    </div>
    <div id="lina-garcia">
        <a>Lina Garcia<img src="https://www.afiuniversal.com.do/sobre-afi-universal/Imagenes/consejo-administrativo/img-gobierno-lina-garcia.jpg"/></a>
    </div>

</body>

</html>
javascript jquery html css
1个回答
0
投票

我不确定这是否是您想要的,但是无论如何,我认为您正在寻找的是jquery的.hover函数,您可以像这样实现:

$("#circulo-show").hover(function() {
  $("#lina-garcia").css("display", "block");
  }, function() {
  $("#lina-garcia").css("display", "none");
});

REF:https://www.w3schools.com/jquery/event_hover.asp

[如果您想知道如何将图像作为工具提示放置,并希望在有人悬停时使用jquery使其可见,那么这完全取决于您的CSS,您可以根据自己的需要进行修改。

如果是这种情况,则可以使用this code,将span元素更改为所需的图像,然后根据需要进行进一步的自定义。

© www.soinside.com 2019 - 2024. All rights reserved.