javascript - 为类中的每个元素添加特定的悬停

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

Code Pen

我正在寻找这样的东西:

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