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

Question

所以我有几个项目有一个类，每个项目都有一个具有特定名称的描述磁带。我希望鼠标悬停上的项目上出现名称。我用jquery做了这个工作，但唯一的问题是有很多这些项目，我不能使用他们的ID添加到每个项目的悬停功能。 （当我这样做时，我觉得很愚蠢）。 所以我正在寻找一种很好的清洁方式将我的整个悬停功能合并为一个。

HTML CODE：

<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 CODE：

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

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>