私の問題は、マウスを合わせると画像が上にスライドし、マウスを離すと下にスライドすることです。しかし、私は多くの画像とコンテンツボックスを持っているので、ボックスにカーソルを合わせると、他のすべてのコンテンツボックスも一緒にスライドします.これの問題は何ですか.私を助けてください.
私のJqueryはスクリプトファイルで参照されています：
$("ul.contentnav li a").stop().mouseover(function(e){
$(this).siblings().slideDown("slow");
})
$("ul.contentnav li a").stop().mouseout(function(e){
var description = $(this).next($(".description"));
var descriptionImg = $(this).next($(".descriptionImg"));
$(this).siblings().slideUp("slow");
//description.slideUp("slow");
//$(this).siblings().slideUp("slow");
})
ここに私のHTMLがあります：
<div class="content">
<ul class="contentnav">
<li><a href="#content_aboutPearl"><img src="images/afd.jpg" width="222" height="161" /></a>
<div class='description'><p class='description_content'>ABOUT FASHION DESIGN</p></div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#content_fashiondesign"><img src="images/pearl02.jpg" width="222" height="161" /></a>
<div class='description'><p class='description_content'>FASHION DESIGN</p></div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd3.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>ADMISSION PROCEDURE </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd4.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>COURSE OVERVIEW </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/dp.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>DOWNLOAD <br />
PROSPECTUS </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd6.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>EVENTS/BLOGS </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/daf.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>DOWNLOAD <br />
APPLICATION FORM </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd8.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>STUDENTS PORTFOLIO </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
<li><a href="#"><img src="images/fd9.jpg" width="222" height="161" /></a>
<div class='description'>
<p class='description_content'>FACULTY </p>
</div>
<div class="descriptionImg"><img src="images/plus.png" width="35" height="35" /></div>
</li>
</ul>
<!-- end .content --></div>
これが私のCSSです：
ul.contentnav {
list-style: none; /* this removes the list marker */
}
ul.contentnav li {
position:relative;
float:left;
margin-right:2px;
margin-bottom:2px;
width: 222px;
height: 161px;
}
ul.contentnav li:nth-child(3){
margin-right:0px;
}
ul.contentnav li:nth-child(6){
margin-right:0px;
}
ul.contentnav li:nth-child(9){
margin-right:0px;
}
ul.contentnav a, ul.contentnav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
/*padding: 5px 5px 5px 15px;*/
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
width: 220px; /*this width makes the entire button clickable for IE6. If you don't need to support IE6, it can be removed. Calculate the proper width by subtracting the padding on this link from the width of your sidebar container. */
text-decoration: none;
text-align:center;
background-color: #e02f1d;
height: 161px;
position:relative;
}
ul.contentnav a:hover, ul.contentnav a:active, ul.contentnav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
color: #FFF;
}
div.description{
position:absolute; /* absolute position (so we can position it where we want)*/
bottom:0px; /* position will be on bottom */
left:0px;
width:220px;
/* styling bellow */
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
opacity:0.6; /* transparency */
filter:alpha(opacity=60); /* IE transparency */
display:none;
/*display:block;*/
}
p.description_content{
padding:10px;
margin:0px;
font-size:13px;
}
div.descriptionImg{
position:absolute; /* absolute position (so we can position it where we want)*/
top:50px; /* position will be on bottom */
left:90px;
display:none;
}