div1の位置をdiv2のtop＆left offset + div2の幅に設定するのが、なぜそれを右上隅に配置しないのですか？

Question

function handler(ev) { 
 
    \t \t \t \t var target = $(ev.target); 
 
    \t \t \t \t if(target.is(".item")) { 
 
\t \t \t \t \t var brt = $(target).offset().top; 
 
\t \t \t \t \t var let = $(target).offset().left + $(".test").width(); 
 
\t \t \t \t \t 
 
\t \t \t \t \t $('#DivToShow').css({'top':brt,'left':let, 'display':'block', 'z-index':'10'}); 
 
    \t \t \t \t } 
 
\t \t \t } 
 
\t \t \t $(".item").mouseover(handler);

body { 
 
font: 1em/1.67 'Open Sans', Arial, Sans-serif; 
 
margin: 0; 
 
background: #010101; 
 
} 
 

 
.masonry { 
 
margin: 10em 10em; 
 
padding: 0; 
 
-moz-column-gap: 4.3em; 
 
-webkit-column-gap: 4.3em; 
 
column-gap: 4.3em; 
 
font-size: .85em; 
 
} 
 

 
.item { 
 
display: inline-block; 
 
background: #3D3D3D; 
 
color: white; 
 
padding: 1em; 
 
margin: 0 0 1.5em; 
 
width: 100%; 
 
border: 1px solid #737373; 
 
border-radius: 5px; 
 
text-align: center; 
 
} 
 

 
.item:hover { 
 
-webkit-filter: contrast(.2); 
 
filter: contrast(.2); 
 
} 
 

 
@media only screen and (min-width: 400px) { 
 
.masonry { 
 
-moz-column-count: 2; 
 
-webkit-column-count: 2; 
 
column-count: 2; 
 
} 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
.masonry { 
 
-moz-column-count: 3; 
 
-webkit-column-count: 3; 
 
column-count: 3; 
 
} 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
.masonry { 
 
-moz-column-count: 4; 
 
-webkit-column-count: 4; 
 
column-count: 4; 
 
} 
 
} 
 

 
@media only screen and (min-width: 1100px) { 
 
.masonry { 
 
-moz-column-count: 5; 
 
-webkit-column-count: 5; 
 
column-count: 5; 
 
} 
 
} 
 

 
.item .img_1 { 
 
display: block; 
 
height: 130px; 
 
width: 275px; 
 
margin: 0 auto; 
 
padding-bottom: 10px; 
 
}

<script src="http://www.sethjfreeman.com/Resources/jquery-3.1.1.js"></script> 
 
<div id="DivToShow" style="height: 100px; width: 100px; background: green; display: none; position: absolute;"></div> 
 
\t \t <div class="masonry"> 
 
    \t \t \t <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php"><div class="item test"><img src="http://www.sethjfreeman.com/HomePage/ItemImages/GoogleReplica.png" class="img_1">Google.com Replica</div></a> 
 
    \t \t \t <a href="/ProjectHolder/WebProjects/PhPToMySQLStoringFormInformation/index.php"><div class="item">Php Form <br> MySQL Database</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
    \t \t \t <a href=""><div class="item">...</div></a> 
 
\t \t </div>

説明：
Iクラス（項目）とDIVのオフセットを計算するときにID（DivToShow）とDIVを配置しない&トップ+幅を左側に右上隅。それはそれを近くにしますが、正確ではありません。これはなぜですか、どうすれば修正できますか？

Answer 1

第1位。 var target = $(ev.target);があるので、targetを使用することができます。$(target)は必要ありません。ある<div class="item">...</div>のあなたはそれが（親を使用幅のためにあなたが

第三のホバリング項目の上に表示されて表示された項目の高さを削除する必要が

第二target.offset().top - $('#DivToShow').height();）：

（使用しないようにしてくださいオプション1

<a href=""> 
    <div class="item">...</div> 
    </a> 

）：

0123： letではJavaScriptの構文であるから、それは笑（ https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/letソース）人々を混乱させる可能性がある letに名前を付けます

function handler(ev) { 
 
    var target = $(ev.target); 
 
    if (target.is(".item")) { 
 
    var brt = target.offset().top - $('#DivToShow').height(); 
 
    var mylet = target.parent().offset().left + target.parent().width(); 
 

 
    $('#DivToShow').css({ 
 
     'top': brt, 
 
     'left': mylet, 
 
     'display': 'block', 
 
     'z-index': '10' 
 
    }); 
 
    } 
 
} 
 
$(".item").mouseover(handler);

body { 
 
    font: 1em/1.67 'Open Sans', Arial, Sans-serif; 
 
    margin: 0; 
 
    background: #010101; 
 
} 
 

 
.masonry { 
 
    margin: 10em 10em; 
 
    padding: 0; 
 
    -moz-column-gap: 4.3em; 
 
    -webkit-column-gap: 4.3em; 
 
    column-gap: 4.3em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    background: #3D3D3D; 
 
    color: white; 
 
    padding: 1em; 
 
    margin: 0 0 1.5em; 
 
    width: 100%; 
 
    border: 1px solid #737373; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 

 
.item:hover { 
 
    -webkit-filter: contrast(.2); 
 
    filter: contrast(.2); 
 
} 
 

 
@media only screen and (min-width: 400px) { 
 
    .masonry { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
    -moz-column-count: 5; 
 
    -webkit-column-count: 5; 
 
    column-count: 5; 
 
    } 
 
} 
 

 
.item .img_1 { 
 
    display: block; 
 
    height: 130px; 
 
    width: 275px; 
 
    margin: 0 auto; 
 
    padding-bottom: 10px; 
 
}

<script src="http://www.sethjfreeman.com/Resources/jquery-3.1.1.js"></script> 
 
<div id="DivToShow" style="height: 100px; width: 100px; background: green; display: none; position: absolute;"></div> 
 
<div class="masonry"> 
 
    <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php"> 
 
    <div class="item test"><img src="http://www.sethjfreeman.com/HomePage/ItemImages/GoogleReplica.png" class="img_1">Google.com Replica</div> 
 
    </a> 
 
    <a href="/ProjectHolder/WebProjects/PhPToMySQLStoringFormInformation/index.php"> 
 
    <div class="item">Php Form <br> MySQL Database</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
</div>

オプション2：

function handler(ev) { 
 
    var target = $(ev.target); 
 
    if (target.is(".item")) { 
 
    var brt = target.offset().top; 
 
    var mylet = target.parent().offset().left + target.parent().width(); 
 

 
    $('#DivToShow').css({ 
 
     'top': brt, 
 
     'left': mylet, 
 
     'display': 'block', 
 
     'z-index': '10' 
 
    }); 
 
    } 
 
} 
 
$(".item").mouseover(handler);

body { 
 
    font: 1em/1.67 'Open Sans', Arial, Sans-serif; 
 
    margin: 0; 
 
    background: #010101; 
 
} 
 

 
.masonry { 
 
    margin: 10em 10em; 
 
    padding: 0; 
 
    -moz-column-gap: 4.3em; 
 
    -webkit-column-gap: 4.3em; 
 
    column-gap: 4.3em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    background: #3D3D3D; 
 
    color: white; 
 
    padding: 1em; 
 
    margin: 0 0 1.5em; 
 
    width: 100%; 
 
    border: 1px solid #737373; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 

 
.item:hover { 
 
    -webkit-filter: contrast(.2); 
 
    filter: contrast(.2); 
 
} 
 

 
@media only screen and (min-width: 400px) { 
 
    .masonry { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
    -moz-column-count: 5; 
 
    -webkit-column-count: 5; 
 
    column-count: 5; 
 
    } 
 
} 
 

 
.item .img_1 { 
 
    display: block; 
 
    height: 130px; 
 
    width: 275px; 
 
    margin: 0 auto; 
 
    padding-bottom: 10px; 
 
}

<script src="http://www.sethjfreeman.com/Resources/jquery-3.1.1.js"></script> 
 
<div id="DivToShow" style="height: 100px; width: 100px; background: green; display: none; position: absolute;"></div> 
 
<div class="masonry"> 
 
    <a href="/ProjectHolder/WebProjects/GoogleReplica/index.php"> 
 
    <div class="item test"><img src="http://www.sethjfreeman.com/HomePage/ItemImages/GoogleReplica.png" class="img_1">Google.com Replica</div> 
 
    </a> 
 
    <a href="/ProjectHolder/WebProjects/PhPToMySQLStoringFormInformation/index.php"> 
 
    <div class="item">Php Form <br> MySQL Database</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
    <a href=""> 
 
    <div class="item">...</div> 
 
    </a> 
 
</div>