所以我用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>
我不确定这是否是您想要的,但是无论如何,我认为您正在寻找的是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元素更改为所需的图像,然后根据需要进行进一步的自定义。