為類中的每個元素添加特定的懸停

Question

因此，我有一個類別的幾個項目，每個項目都有一個帶有特定名稱的描述磁帶。 我想在鼠標懸停時在項目上顯示名稱。 我用jquery完成了這項工作，但唯一的問題是這些項目很多，我無法在使用其ID的情況下向每個項目添加懸停功能。 （當我這樣做時，我會感到愚蠢）。 所以我正在尋找一種很好的干凈方法將我所有的懸停功能合並為一個。

HTML代碼：

<div class="cam" id="CAM01"><div class="camD" id="CAMd01"><p>ZX-8810HD</p></div></div>
<div class="cam" id="CAM02"><div class="camD" id="CAMd02"><p>ZX-8820HD</p></div></div>
<div class="cam" id="CAM03"><div class="camD" id="CAMd03"><p>ZX-8822HD</p></div></div>

JS代碼：

$("#CAM01").hover(function() {
  $("#CAMd01").css('opacity', '1');
});
$("#CAM01").mouseout(function() {
  $("#CAMd01").css('opacity', '0');
});
$("#CAM02").hover(function() {
  $("#CAMd02").css('opacity', '1');
});
$("#CAM02").mouseout(function() {
  $("#CAMd02").css('opacity', '0');
});
$("#CAM03").hover(function() {
  $("#CAMd03").css('opacity', '1');
});
$("#CAM03").mouseout(function() {
  $("#CAMd03").css('opacity', '0');
});

編碼筆

我正在尋找這樣的東西：

$(".cam").hover(function(){
  if(selectedCamId == CAM03){
     $("#CAMd03").css('opacity', '1');
  } 
});

Answer 1

這是使用CSS的方法：

 .camD { opacity: 0;} .cam:hover .camD {opacity:1;} /* Css just for testing */ .cam {width: 100px; height: 50px; border: 1px solid black;} 

 <div class="cam" id="CAM01"><div class="camD" id="CAMd01"><p>ZX-8810HD</p></div></div> <div class="cam" id="CAM02"><div class="camD" id="CAMd02"><p>ZX-8820HD</p></div></div> <div class="cam" id="CAM03"><div class="camD" id="CAMd03"><p>ZX-8822HD</p></div></div> 

類似於jQuery：

 $(".cam").hover(function(){ $('.camD',this).css('opacity', '1'); },function(){ $('.camD',this).css('opacity', '0'); }); 

 .camd { opacity: 0; } .cam { width: 100px; height: 50px; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cam" id="CAM01"><div class="camD" id="CAMd01"><p>ZX-8810HD</p></div></div> <div class="cam" id="CAM02"><div class="camD" id="CAMd02"><p>ZX-8820HD</p></div></div> <div class="cam" id="CAM03"><div class="camD" id="CAMd03"><p>ZX-8822HD</p></div></div> 

Answer 2

這是使用jQuery實現此目的的一種更簡潔的方法。

 $(".cam").hover( // Function to execute when the mouse is hovered over the element function() { $(this).children(".camD").fadeTo("slow", 1); }, // Function to execute when the mouse is hoverd out of the element. function() { $(this).children(".camD").fadeTo('slow', 0); } ); 

 #container_small { position: absolute; display: block; right: 0px; left: 0px; padding: 0px; top: 50px; z-index: 1; width: 100%; } body { overflow: -moz-scrollbars-vertical; overflow-y: scroll; background-color: #FFF; background-image: url(../sh_images/bg7.jpg); background-position: bottom center; background-repeat: no-repeat; background-attachment: fixed; } .cam { width: 200px; height: 200px; background-position: center; background-repeat: no-repeat; display: inline-block; position: relative; cursor: pointer; opacity: 0.5; margin: 20px; padding: 0px; border: none; background-color: #dddee0; -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; } .cam:hover { opacity: 1; -webkit-transition: 0.5s ease-out; -moz-transition: 0.5s ease-out; -o-transition: 0.5s ease-out; transition: 0.5s ease-out; } .camD { position: absolute; width: 200px; height: 50px; margin-top: 150px; padding: 0px; display: inline; background-color: rgba(0, 0, 0, 0.3); text-align: center; text-justify: auto; opacity: 0; pointer-events: none; color: #FFF; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <div id="container_small"> <div class="cam" id="CAM01"> <div class="camD" id="CAMd01"> <p>ZX-8810HD</p> </div> </div> <div class="cam" id="CAM02"> <div class="camD" id="CAMd02"> <p>ABC-HD</p> </div> </div> <div class="cam" id="CAM03"> <div class="camD" id="CAMd03"> <p>XYZ-LD</p> </div> </div> </div> 

Answer 3

您只能使用純CSS來做

上述解決方案效果很好，這是另一種解決方案

 .cam { background-color : grey; height : 20px; width: 150px; } .camD{ visibility : hidden; } .cam:hover .camD{ visibility : visible; } 

 <div class="cam" id="CAM01"><div class="camD" id="CAMd01"><p>ZX-8810HD</p></div></div> <div class="cam" id="CAM02"><div class="camD" id="CAMd02"><p>ZX-8820HD</p></div></div> <div class="cam" id="CAM03"><div class="camD" id="CAMd03"><p>ZX-8822HD</p></div></div>