解決しました!!! この質問の最後までスクロールしてください。
ここでわかるように：
このウェブサイトに関するショーのすべてのサウンドトラックを含むページを作成しましたが、それをロードすると、行を作成する div 内の div は、特定の div の 1 つにカーソルを合わせるまで正しく表示されません。それがしなければならないように。訪問者がそれを修正する方法を知る必要がなく、イライラするだけなので、どうすればよいでしょうか。
ドム:
<body>
<div> <!--row wrapper-->
<div class="track"> <!--track information-->
<img src="" /> <!--album cover-->
<h3></h3> <!--artist-->
<p></p> <!--title-->
</div> <!--/track information-->
</div> <!--/row wrapper-->
<div> <!--row wrapper-->
<div class="track"> <!--track information-->
<img src="" /> <!--album cover-->
<h3></h3> <!--artist-->
<p></p> <!--title-->
</div> <!--/track information-->
</div> <!--/row wrapper-->
...
</body>
JS (jQuery):
$(document).ready(function() {
$('div.track').mouseenter(function() {
$(this).stop(); //stop previous animation
$(this).animate({height:'250'}); //expand, so title and artist will be visible.
});
$('div.track').mouseleave(function() {
$(this).stop(); //stop previous animation
$(this).animate({height:'160px'}); //enlarge the div to it's original size
});
});
CSS:
<style>
.track{
vertical-align:top;
margin-right: 26px;
background-color: #a90000;
padding: 10px;
width: 160px;
height: 160px;
overflow: hidden;
border-radius: 6px;
color: #fff;
cursor: default;
margin-bottom: 20px;
display: inline;
}
</style>
解決しました！追加した
CSS:
.track {
float: left;
}
.row{
clear: left;
}
HTML:
<div class="row">
<div class="track"></div>
<div class="track"></div>
<div class="track"></div>
<div class="track"></div>
<div class="track"></div>
</div>
ハンガースターに感謝