在我的作品集网站上,每个项目都有自己的标题长方形。当你移过这个矩形时,第一张照片出现,当你移动它时,照片消失,标题重新出现。mouseenter mouseleave重复jquery
这是HTML
<div id="wat">
<div class="project1" id="project" >
<div class="een" id="foto" >
<h2>de studio.</h2>
</div><!-- /.een -->
</div><!-- /project1 -->
<div class="project2" id="project" >
<div class="twee" id="foto" >
<h2>tiffanys mechelen.</h2>
</div><!-- /twee -->
</div><!-- /project2 -->
<div class="project3" id="project">
<div class="drie" id="foto" >
<h2>project 3.</h2>
</div><!-- /drie -->
</div><!-- /project3 -->
<div class="project4" id="project" >
<div class="vier" id="foto" >
<h2>geboortekaartjes.</h2>
</div><!-- /vier -->
</div><!-- /project4 -->
<div class="project5" id="project">
<div class="vijf" id="foto" >
<h2>skoetefest</h2>
</div><!-- /vijf -->
</div><!-- /project5 -->
<div class="project6" id="project">
<div class="zes" id="foto" >
<h2>fysica bundel</h2>
</div><!-- /zes -->
</div><!-- /project6 -->
<div class="project7" id="project">
<div class="zeven" id="foto" >
<h2>mmmechelen feest.</h2>
</div><!-- /zeven -->
</div><!-- /project7 -->
<div class="project8" id="project">
<div class="acht" id="foto" >
<h2>biking.</h2>
</div><!-- /acht -->
</div><!-- /project8 -->
<div class="project9" id="project">
<div class="negen" id="foto" >
<h2>project 9.</h2>
</div><!-- /negen -->
</div><!-- /project9 -->
</div><!-- /wat -->
这是CSS部分
.project1 h2,
.project2 h2,
.project3 h2,
.project4 h2,
.project5 h2,
.project6 h2,
.project7 h2,
.project8 h2,
.project9 h2
{
color: #FF2A00;
text-transform: uppercase;
font-size: 1rem;
padding-top: 70px;
visibility: visible;
}
.een
{
background-image: url(../images/destudio.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.twee
{
background-image: url(../images/tiffanys.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.vier
{
background-image: url(../images/geboorte.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.vijf
{
background-image: url(../images/skoete.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.zes
{
background-image: url(../images/geboorte.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.zeven
{
background-image: url(../images/mmmechelen.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
.acht
{
background-image: url(../images/biking.gif);
background-repeat: no-repeat;
background-position: center 10px;
height: 140px;
visibility: hidden;
}
JQuery的:
$(document).ready(function(){
// mouseenter
$(".project1").on("mouseenter", function() {
$(".project1 h2").css("visibility", "hidden");
$(".een").css("visibility", "visible");
});
$(".project2").on("mouseenter", function() {
$(".project2 h2").css("visibility", "hidden");
$(".twee").css("visibility", "visible");
});
$(".project4").on("mouseenter", function() {
$(".project4 h2").css("visibility", "hidden");
$(".vier").css("visibility", "visible");
});
$(".project5").on("mouseenter", function() {
$(".project5 h2").css("visibility", "hidden");
$(".vijf").css("visibility", "visible");
});
$(".project7").on("mouseenter", function() {
$(".project7 h2").css("visibility", "hidden");
$(".zeven").css("visibility", "visible");
});
$(".project8").on("mouseenter", function() {
$(".project8 h2").css("visibility", "hidden");
$(".acht").css("visibility", "visible");
});
//mouseleave
$(".project1").on("mouseleave", function() {
$(".project1 h2").css("visibility", "visible");
$(".een").css("visibility", "hidden");
});
$(".project2").on("mouseleave", function() {
$(".project2 h2").css("visibility", "visible");
$(".twee").css("visibility", "hidden");
});
$(".project4").on("mouseleave", function() {
$(".project4 h2").css("visibility", "visible");
$(".vier").css("visibility", "hidden");
});
$(".project5").on("mouseleave", function() {
$(".project5 h2").css("visibility", "visible");
$(".vijf").css("visibility", "hidden");
});
$(".project7").on("mouseleave", function() {
$(".project7 h2").css("visibility", "visible");
$(".zeven").css("visibility", "hidden");
});
$(".project8").on("mouseleave", function() {
$(".project8 h2").css("visibility", "visible");
$(".acht").css("visibility", "hidden");
});
});
它工作正常,但它是一个大量的代码......能我写的jQuery部分不同吗?
ID必须是唯一的,您的HTML无效。从修复它开始! –
它可以写得很简短,你可以为此添加一个JSFiddle Demo吗?所以我可以给你一个快速的想法? –
使用$('[class^= project]')可以很容易,但是我遇到的问题是您的语言中的数字... – pbenard