adding specific hover for each element in class

Question

So I have several items with one class, each one has a description tape with an specific name. I want to have names appeared on items on mouse hover. I did the job with jquery but the only problem is there are a lot of these items and I can't add hover function to each on using their ID. (and I feel stupid when I do so). so I'm looking for a nice clean way to merge my whole hover functions into one.

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

And I'm looking for sth like this:

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

• Yandy_Viera: Why don't you use css for that like this .camD{opacity: 0} .cam:hover .camD {opacity: 1}
• George Carlin: cause if I do so, all elements will effected when user hover the mouse on one of them.
• Yandy_Viera: No, that does not happen, only the one you hover is activate check this fiddle jsfiddle.net/Yandy_Viera/p4pvp856

Answer 1

This is how you do it with 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>

Similar for 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

This is somewhat cleaner way of achieving this using 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

You can do it with pure css only

Above mentioned solution works fine, here is an another solution

.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>

• George Carlin: I can't use css because I need the js function to do something more than opacity stuff. I want it to do some tween stuff with tweenlite there. by the way, thank you for your help.