我对javascript和Jquery还是很陌生。我想要做的是将鼠标悬停在组织结构图框上时弹出带有完整说明的图像。几天后，我终于找到了解决方案。但是，它仅适用于顶部的一个框。我尝试使第二个框也弹出带有完整描述的图像，但失败了。也许在Jquery编码上有问题，但是我仍然找不到解决方案。可以吗？
这是我的编码。我希望有一个人可以帮助我。我仍然很新，现在已经被困了几天。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" charset ="utf-8" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:300italic,400italic,400,100,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: ;
background-color: #f1f1f1;
-webkit-font-smoothing: antialiased;
}
.box-row {
text-align: center;
}
.box {
border: 4px solid #000000;
height: 80px;
width: 286px;
display: inline-block;
top: 46px;
}
.box:hover {
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
width: 296px;
top:36px;
}
.box1 {
border: 4px solid #000000;
height: 80px;
width: 286px;
display: inline-block;
top: 46px;
}
.box1:hover {
box-shadow: 8px 8px 9px -4px rgba(0,0,0,0.1);
width: 296px;
top:36px;
}
.bar {
width: 30px;
transform: rotate(90deg);
margin: 13px auto 13px auto;
border: 2px solid #000000;
}
.bar2 {
width: 84px;
transform: rotate(90deg);
margin: 39px auto -6px auto;
border: 2px solid #000000;
}
.horizontal-bar {
display: inline-block;
width: 35px;
margin-bottom: 20px;
margin-left: -6px;
margin-right: -5px;
border: 2px solid #000000;
}
.box-group {
display: inline-block;
width: 48%;
}
.second {
margin: 8px 10px;
}
.second-separator {
width: 629px;
margin-bottom: 55px;
margin-right: 344px;
border: 2px solid #000000;
}
.vertical-bar {
width: 176px;
margin-bottom: -55px;
margin-top: 27px;
transform: rotate(90deg);
border: 2px solid #000000;
}
#tooltip {
text-align: left;
z-index: 100;
border-radius: 2px;
color: black;
font-size: 14px;
padding: 6px 10px;
top: px;
white-space: nowrap;
height: 200px;
width: 350px;
position: absolute;
left: 0;
transform: translate(-50%, -100%);
background: white;
box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3);
}
#tooltip:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #111;
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
}
#tooltip.left:after {
left: 10px;
margin: 0;
}
#tooltip.right:after {
right: 10px;
left: auto;
margin: 0;
}
.mbt-tooltip {
display: none;
width: auto;
max-width: 100% !important;
}
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#;">
<h2>STRUCTURE</h2>
<br>
<br>
<br>
<div class="box-row">
<div>
<div class="box">
<p>Vice President</p>
<p>Business Technology</p>
<p>Aiman Iskandar</p>
<div class="mbt-tooltip">
<img src="image/nizam1.jpg" align="left">
<ul>
<li>Aiman Iskandar</li>
<br/>
<li>54 Years Old</li>
<br/>
<li>Vice President</li>
</ul>
</div>
</div>
<hr class="bar" />
</div>
<div>
<div class="box1">
<p>Head</p>
<p> Consulting & Technology Services</p>
<p>aidil iman</p>
<div class="mbt-tooltip">
<img src="image/search.jpg" align="left">
<ul>
<li>aidil iman</li>
<br/>
<li>51 Years Old</li>
<br/>
<li>CTS Services</li>
</ul>
</div>
</div>
<hr class="bar2" />
</div>
<br />
<br />
</div>
</div>
<div>
</div>
</div>
</div>
</div>
<script>
$( function() {
var targets = $('.box'),
tooltip = $('.mbt-tooltip'),
title = false;
targets.bind( 'mouseenter', function()
{
tip = targets.children('.mbt-tooltip');
tooltip = $( '<div id="tooltip"></div>' );
if( !tip || tip == '' )
return false;
//target.remove('.mbt-tooltip');
//target.removeAttr( 'title' );
tooltip.css( 'opacity', 0 )
.html( tip.clone().show() )
.appendTo( targets );
var init_tooltip = function()
{
if( $( window ).width() < tooltip.outerWidth() * 1.5 )
tooltip.css( 'max-width', $( window ).width() / 2 );
else
tooltip.css( 'max-width', 340 );
var pos_left = targets.offset().left + ( targets.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
pos_top = targets.offset().top - tooltip.outerHeight() - 20;
if( pos_left < 0 )
{
pos_left = targets.offset().left + targets.outerWidth() / 2 - 20;
tooltip.addClass( 'left' );
}
else
tooltip.removeClass( 'left' );
if( pos_left + tooltip.outerWidth() > $( window ).width() )
{
pos_left = targets.offset().left - tooltip.outerWidth() + targets.outerWidth() / 2 + 20;
tooltip.addClass( 'right' );
}
else
tooltip.removeClass( 'right' );
if( pos_top < 0 )
{
var pos_top = targets.offset().top + targets.outerHeight();
tooltip.addClass( 'top' );
}
else
tooltip.removeClass( 'top' );
tooltip.css( { left: pos_left, top: pos_top } )
.animate( { top: '+=10', opacity: 1 }, 50 );
};
init_tooltip();
$( window ).resize( init_tooltip );
var remove_tooltip = function()
{
tooltip.animate( { top: '-=10', opacity: 0 }, 300, function()
{
$( this ).remove();
});
targets.children('.mbt-tooltip', tip);
};
//**** ISSUE AREA ****//
targets.bind( 'mouseleave', remove_tooltip );
tooltip.bind( 'click', remove_tooltip );
});
});
</script>
<br>
</body>
</html>