adding specific hover for each element in class

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

Answers


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>

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>

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>

Need Your Help

Streams Concatenation error

c# stream

I have two streams that i want to combine into one stream. The first stream is user-defined stringStream class that inherits from System.IO.Stream class and the second stream is a networkStream , I

MVC Return List of Columns Other Than Full Model

c# visual-studio-2010 entity-framework

I have a Model created with a table called "Customers".

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.