Hover to show/hide div

Question

I have a page to show multiple images and when hover some div contains information with show above the image. I show the image from directories by looping.

I used jquery to handle the hover but the effect doesnt show. Anyone can help?

html/php

<?php
//to show remaining images by looping
$dir = dir("images");
while($filename=$dir->read()) {

    if($filename == "." || $filename == ".." || $filename == $first_image) continue;

     echo "<div class='cp-thumb'>";

     echo "<div class='cp-hover' style='display: none;' ><div class='cpHover-bg'></div>
            <div class='cpHover-info'><p class='text11'>".$newDatetime."</p><p class='text10'>".$caption."</p></div></div>"; 
     echo "<img src='images/".$filename."'class='img_235x235' />
     </div>";

jquery:

<script>
    $(".cp-thumb").hover(
          function () {
            $(".cp-hover").show();
          }, 
          function () {
            $(".cp-hover").hide();
          }
        );
</script>

output:

Answer 1

CSS Solution :
You can handle this situation without jQuery at all. You can use CSS only by a simple code line

.cp-thumb:hover .cp-hover { display:block; }

example - jsFiddle

jQuery Solution:

its should be written like this example - http://jsfiddle.net/zEJVK/

$(".box").hover(
     function() {
         $(".box2").show() 
     }, 
     function() {
         $(".box2").hide();
     }
);

Update : I've updated the code, depend on what is the structure, you can use $(this) example - http://jsfiddle.net/zEJVK/1/

This example is selecting the closest div to the hovered element and shows it. you can use children or parent and familiar function methods to show your relevant element.

Another update :
http://jsfiddle.net/zEJVK/3/
If the Thumb elemnt is the parent, you should use children method, example posted

$(".cp-thumb").hover(
    function() {
        $(this).children(".cp-hover").show();
    }, 
    function() {
        $(this).children(".cp-hover").hide();
    }
);

Answer 2

Try this.

$(document).ready(function() {
    $(".cp-thumb").hover(
      function () {
        $(".cp-hover").show();
      }, 
      function () {
        $(".cp-hover").hide();
      }
    );
});

Answer 3

You need to use relative queries to find cp-hover , in this case you need to find the cp-hover element which is a child of the hovered cp-thumb element

<script>
    $(".cp-thumb").hover(
          function () {
            $(this).find(".cp-hover").show();
          }, 
          function () {
            $(this).find(".cp-hover").hide();
          }
        );
</script>

Answer 4

You can use jquery mouseenter() and mouseleave()

$(".cp-thumb").mouseenter(function(){
    $(".cp-hover").show();
});

$(".cp-thumb").mouseleave(function(){
    $(".cp-hover").hide();
});

Answer 5

You could do it using

$(".cp-thumb").live('hover',function () {
                $(this).find(".cp-hover").show();
              }, 
              function () {
                $(this).find(".cp-hover").hide();
              }
         );
    

    
        $("body").delegate(".cp-thumb", "hover",         
              function () {
                $(this).find(".cp-hover").show();
              }, 
              function () {
                $(this).find(".cp-hover").hide();
              });
    

    
        $("body").on("click", ".cp-thumb",         
              function () {
                $(this).find(".cp-hover").show();
              }, 
              function () {
                $(this).find(".cp-hover").hide();
              });

You could also check it from : http://justprogrammer.com/2013/06/25/jquery-basic-concepts/

Answer 6

Here is an example : http://jsfiddle.net/J43X6/

In your script you should wrap your function with

$( document ).ready(function() {
    // Your code here
});