mouseenter mouseleave repeating jquery

Question

На моем портфолио сайта каждый проект имеет свой собственный прямоугольник с его названием. Когда вы перемещаетесь по этому прямоугольнику, появляется первая фотография, когда вы переходите от нее, фото исчезает, и заголовок снова появляется.

это 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 --> 

это устанавливаемая сотовой Часть

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

}); 

Он отлично работает, но это много кода ... может 't Я пишу часть jquery по-другому?

Answer 1

Идея классов состоит в том, что вы используете их для нескольких объектов/объектов, которые имеют один класс. В настоящее время вы используете идею идентификаторов (идентификаторов), которые обычно однозначно сопоставляются с объектом.

С тем, что вы хотите сделать следующее:

• Переключите 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() таким образом, что только элемент, на котором вы ввели, будет изменено.

Answer 2

Я сделал некоторые изменения в 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"); 
}); 

Answer 3

Вам нужно будет поменять местами идентификаторы и классы как идентификаторы должен быть уникальным

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

Answer 4

Прежде всего 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

Answer 5

Существует гораздо более простой способ справиться с этим. Метод JQuery парения занимает 2 функции: одну обработку, когда мышь входит рама и одна обработка, когда она покидает

Попробуйте это:

$(".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) Вы можете использовать .hoverс обратным вызовом и startwith селектор.
2) this играет жизненно важную роль.

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

FYI: id должно быть уникальным.

Answer 7

да вы можете,

первую очередь у вас есть более 1 идентичного идентификатор, который плохо, изменить его.

для 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"); 

сделайте то же самое для мыши с onmouseout в других тегах html и еще одну функцию, например myMouseOn(), но с другим именем, и вы готовы к работе!