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

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

Robert McKee · Accepted Answer · 2015-08-15 05:16:38Z

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>

Chaya Sandamali · Accepted Answer · 2015-08-15 05:54:42Z

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>

keshav · Accepted Answer · 2015-08-15 06:03:27Z

1

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>

answered Aug 15, 2015 at 6:03

keshav

7526 silver badges19 bronze badges

1 Comment

George Carlin Over a year ago

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.

Collectives™ on Stack Overflow

adding specific hover for each element in class

3 Answers 3

Comments

Comments

You can do it with pure css only

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

You can do it with pure css only

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related