mouseenter mouseleave重复jquery

时间：2013-12-10 10:18:42

标签： jquery repeat mouseenter mouseleave

在我的投资组合网站上，每个项目都有自己的标题矩形。当您移动此矩形时，第一张照片会显示出来，当您从中移动时，照片会消失并且标题会重新出现。

这是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部分吗？

7 个答案:

答案 0 :(得分：1)

类的想法是你将它们用于同一类的几个对象/实体。你目前使用的是id（标识符）的概念，它通常唯一地映射到一个对象。

据说你想要做以下事情：

  • 切换class中的id和div属性。
  • 在CSS中，在.project和.foto。
    • 上提供样式属性
  • 在jQuery中也这样做：$(".project1")例如变为(".project")。
  • 另请在代码中使用缩进，以便于阅读。

我认为以下jQuery甚至应该适用于mouseenter，例如：

$(".project").on("mouseenter", function() {
    $(this).find("h2").css( "visibility", "hidden" );
    $(this).find(".file").css( "visibility", "visible" );
});

请注意，它使用$(this)然后使用.find()，以便只更改您输入的元素。

答案 1 :(得分：0)

我在html和jquery中做了一些更改

<div id="wat">
<div class="project" id="project1" >
    <div class="sub" id="foto1" >
       <h2>de studio.</h2>
    </div><!-- /.een -->
</div><!-- /project1 -->

<div class="project" id="project2" >
    <div class="sub" id="foto2" >
       <h2>de studio.</h2>
    </div><!-- /.een -->
</div><!-- /project2 -->

<div class="project" id="project3" >
    <div class="sub" id="foto3" >
       <h2>de studio.</h2>
    </div><!-- /.een -->
</div><!-- /project3 -->

</div>

查询

$( ".project").on( "mouseenter", function() {
    $(this).find("h2" ).css( "visibility", "hidden" );
    $(this).find(".sub" ).css( "visibility", "visible" );
});

或类似

$(".project").hover(function() {
    $(this).find("h2" ).css( "visibility", "hidden" );
    $(this).find(".sub" ).css( "visibility", "visible" );
},
function() {
    $(this).find("h2" ).css( "visibility", "visible" );
    $(this).find(".sub" ).css( "visibility", "hidden" );
});

答案 2 :(得分：0)

您需要交换ID和类，因为ID应该是唯一的

<div id="project1" class="project" >
    <div id="een" class="foto" >

然后您可以使用以下

$( ".project" )
    .on("mouseenter", function() {
         $("h2", this).css( "visibility", "hidden" );
         $(".foto", this).css( "visibility", "visible" );
     }).on("mouseleave", function() {
         $("h2", this).css( "visibility", "visible" );
         $(".foto", this).css( "visibility", "hidden" );
     });

答案 3 :(得分：0)

首先id必须unique您可以将id转换为class并尝试，

$("div[class^=project]").on({//$("div.project") if all divs having project class
    "mouseenter": function() {
       $(this).find("h2").css( "visibility", "hidden" );
       $(this).find("div").css( "visibility", "visible" );
    },
   "mouseleave": function() {
       $(this).find("h2").css( "visibility", "visible" );
       $(this).find("div").css( "visibility", "hidden" );
    }
});

完整短代码

<强> HTML 

<div id="wat">
    <div id="project1" class="project">
        <div class="een foto">
             <h2>de studio.</h2>
        </div>
        <!-- /.een -->
    </div>
    <!-- /project1 -->
    <div id="project2" class="project">
        <div class="twee foto">
             <h2>tiffanys mechelen.</h2>
        </div>
        <!-- /twee -->
    </div>
    <!-- /project2 -->
    <div id="project3" class="project">
        <div class="drie foto">
             <h2>project 3.</h2>
        </div>
        <!-- /drie -->
    </div>
    <!-- /project3 -->
    <div id="project4" class="project">
        <div class="vier foto">
             <h2>geboortekaartjes.</h2>
        </div>
        <!-- /vier -->
    </div>
    <!-- /project4 -->
    <div id="project5" class="project">
        <div class="vijf foto">
             <h2>skoetefest</h2>
        </div>
        <!-- /vijf -->
    </div>
    <!-- /project5 -->
    <div id="project6" class="project">
        <div class="zes foto">
             <h2>fysica bundel</h2>
        </div>
        <!-- /zes -->
    </div>
    <!-- /project6 -->
    <div id="project7" class="project">
        <div class="zeven foto">
             <h2>mmmechelen feest.</h2>
        </div>
        <!-- /zeven -->
    </div>
    <!-- /project7 -->
    <div id="project8" class="project">
        <div class="acht foto">
             <h2>biking.</h2>
        </div>
        <!-- /acht -->
    </div>
    <!-- /project8 -->
    <div id="project9" class="project">
        <div class="negen foto">
             <h2>project 9.</h2>
        </div>
        <!-- /negen -->
    </div>
    <!-- /project9 -->
</div>
<!-- /wat -->

<强> CSS 

.project h2 {
    color: #FF2A00;
    text-transform: uppercase;
    font-size: 1rem;
    padding-top: 70px;
    visibility: visible;
}
.foto {
    background-repeat: no-repeat;
    background-position: center 10px;
    height: 140px;
    visibility: hidden;
}
.een {
    background-image: url(../images/destudio.gif);
}
.twee {
    background-image: url(../images/tiffanys.gif);
}
.vier {
    background-image: url(../images/geboorte.gif);
}
.vijf {
    background-image: url(../images/skoete.gif);
}
.zes {
    background-image: url(../images/geboorte.gif);
}
.zeven {
    background-image: url(../images/mmmechelen.gif);
}
.acht {
    background-image: url(../images/biking.gif);
}

<强> SCRIPT 

$("div.project").on({
    "mouseenter": function () {
        $(this).find("h2").css("visibility", "hidden");
        $(this).find("div").css("visibility", "visible");
    },
    "mouseleave": function () {
        $(this).find("h2").css("visibility", "visible");
        $(this).find("div").css("visibility", "hidden");
    }
});

DEMO

答案 4 :(得分：0)

有一种更简单的方法可以解决这个问题。 jQuery方法悬停有两个函数：一个处理鼠标进入框架时处理，另一个处理时离开

试试这个：

$(".project").hover(
    function(){
        $( ".project1 h2" ).css( "visibility", "hidden" );
        $( ".een" ).css( "visibility", "visible" );
    },
    function(){
        $( ".project1 h2" ).css( "visibility", "visible" );
        $( ".een" ).css( "visibility", "hidden" );
    }
);

答案 5 :(得分：0)

1）您可以将 .hover 与回调和 startwith 选择器一起使用。
2） this 扮演重要角色。 

$('[class^="project"]').on( "hover", function() {
    $(this).find("h2" ).hide();
    $(this).next().show();
}, function () {    
    $(this).find("h2" ).show();
    $(this).next().hide();
});

仅供参考：id应该是唯一的。

答案 6 :(得分：0)

是的，你可以，

首先，你有超过1个相同的id，这是坏的，改变它。

表示html：

<div class="project1" id="project" onmouseover="myMouseOn(this.className)" >

用于jquery而不是每个类的这个：

$( ".project5" ).on( "mouseenter", function() {
$( ".project5 h2" ).css( "visibility", "hidden" );
$( ".vijf" ).css( "visibility", "visible" );
});

执行此操作（在jquery准备就绪之外，在脚本标记中执行此操作）：

function myMouseOn(className){
$( "." + className + " h2" ).css( "visibility", "hidden" );
$( className +" div" ).first().css( "visibility", "visible" );

}

对于其他html标签中的onmouseout鼠标和myMouseOn（）之类的其他函数做同样的事情，但是名字不同，你就可以了！

相关问题
最新问题