Подсказка при наведении курсора JS - PullRequest
Новая
       3

Подсказка при наведении курсора JS

0 голосов
/ 10 апреля 2020

Итак, у меня есть эта карта в html, и я хочу показать "изображение Лины Гарсиа с текстом над кружком (id =" circlo-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>

1 Ответ

0 голосов
/ 10 апреля 2020

Я не уверен, что это то, что вам нужно, но в любом случае я думаю, что вы ищете функцию .hover jquery, которую вы можете реализовать следующим образом: 

$("#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, который вы можете изменить в соответствии со своими потребностями.

Если это так, то вы можете использовать этот код , изменить элемент span на изображение, которое вы хотите, и выполнить дополнительные настройки, как вы хотите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...