1. 首頁
  2. 問答
  3. mouseenter mouseleave重複jquery

mouseenter mouseleave重複jquery

2013-12-10 62 views
-2

在我的作品集網站上，每個項目都有自己的標題長方形。當你移過這個矩形時，第一張照片出現，當你移動它時，照片消失，標題重新出現。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部分不同嗎？

來源

2013-12-10 user3046998

+1

ID必須是唯一的，您的HTML無效。從修復它開始！ –

+0

它可以寫得很簡短，你可以爲此添加一個JSFiddle Demo嗎？所以我可以給你一個快速的想法？ –

+0

使用$（'[class^= project]'）可以很容易，但是我遇到的問題是您的語言中的數字... – pbenard

回答

1

類的想法是，你使用它們的幾個對象/實體是相同的類。你目前使用的是ids（標識符）的思想，它通常映射到一個對象。

雖這麼說，你要做到以下幾點：

  • 開關在div S中class和id屬性。
  • 在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()使得僅元素上您輸入得到改變。

來源

2013-12-10 10:24:29 skiwi

+0

好的謝謝！我正在嘗試它:) – user3046998

+0

@ user3046998之前嘗試它，修復您的HTML，謝謝... –

+0

我做了一個愚蠢的錯誤，感謝您的解決方案！ – user3046998

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

來源

2013-12-10 10:27:18

+0

好的，謝謝！我現在要試一試:) – user3046998

0

您將需要交換你的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"); 
    });

來源

2013-12-10 10:27:46 Jonathan

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

來源

2013-12-10 10:27:50

0

還有一個更簡單的處理這種方式。 jQuery的方法懸停需要2層的功能：當鼠標進入幀中的一個處理和一個把手，當它離開

嘗試這種情況：

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

來源

2013-12-10 10:28:28 asdf

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

FYI：id應該是唯一的。

來源

2013-12-10 10:29:07 Praveen

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（））使用不同名稱的鼠標執行同樣的操作，並且您可以輕鬆前往！

來源

2013-12-10 10:37:05

相關問題

 相關問題