mouseenter mouseleave repeating jquery

Question

On my portfolio website each project has his own rectangular with its title. When you move over this rectangular a first photo shows up, when you move from it the photo disappears and the title reappears.

this is the 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 -->

this is the css part

.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" );
});

});

It works fine but it is a lot of code... can't I write the jquery part differently?

Answer 1

The idea of classes is that you use them for several objects/entities which are of the same class. What you are using currently is the idea of ids (identifiers), which usually map uniquely to an object.

With that said you want to do the following:

• Switch the class and id attributes in the divs.
• In the CSS give the style attributes on the .project and .foto.
• In jQuery do the same: $(".project1") becomes (".project") for example.
• Also please use indentation in your code to make it easier to read.

I think the following jQuery should even work for mouseenter for example:

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

Note that it uses $(this) and then .find() such that only the element on which you entered gets changed.

Answer 2

I've made some changes in html and 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>

Query

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

or something like

$(".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" );
});

Answer 3

You will need to swap your IDs and classes as IDs should be unique

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

You can then use the following

$( ".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" );
     });

Answer 4

First of all id must be unique you can convert id to class and try like,

$("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" );
    }
});

Full Short Code

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

Answer 5

There is a much simpler way to handle this. The jQuery method hover takes 2 functions: one handling when a mouse enters the frame and one handling when it leaves

Try this:

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

Answer 6

1) You can use .hover with callback and startwith selector.
2) this plays the vital role.

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

FYI: id should be unique.

Answer 7

yes you can,

first of all you have more then 1 identical id which is bad,change it.

for the html:

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

for the jquery instead of this for every class:

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

do this(outside of jquery ready,do it in script tags):

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

}

do the same thing for mouse with onmouseout in the other html tags and another function like myMouseOn() but with a different name and you're good to go!