0

I've been trying to make a div inside a container div visible when the mouse is moved over the container div. Currently the div that needs to be made visible has property display set as none. I've tried repeatedly to make this work with javascript to no avail. could someone help me out please? The code is included below. 

  HTML
  <html>

  <!--Header Files-->
  <head>

    <!--Icon for tabbed browsers-->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/png"/>

    <!--Including the CSS file that gives all the appearance attributes to the page-->
    <link type="text/css" rel="stylesheet" href="css/talentdatabase.css"/>

    <!--Including the JavaScript file to give interaction with the web objects-->
    <script src="js/talentdatabase.js" type="text/javascript" charset="utf-8"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <!--Title of the page-->

  </head>

  <!--Body-->
  <body>
    <!--Top Banner-->

    <div class="button">
    </div>

    <div class="head"> 

        <a href="index.html"><div class="logo">
            <image src= "" height="60px" width="320px"/>
        </div></a>

        <div class="contact">

        </div>

    </div>

    <div class="bar">
        <a href="talentdatabase.html"><div class="one">
            <h3>Talent Database</h3>
        </div></a>

        <a href="facilities.html"><div class="two">
            <h3>Facilities</h3>
        </div></a>

        <a href="print.html"><div class="three">
            <h3>Print Campaigns</h3>
        </div></a>

        <a href="tv.html"><div class="four">
            <h3>TV Campaigns</h3>
        </div></a>

        <a href="contact.html"><div class="five">
            <h3>Contact Us</h3>
        </div></a>

    </div>

    <div class="container">
            <div class="column1">
                <div class="pic1"><image src= "images/talentdatabase/back/man.png" height="100%" width="100%"/></div>
                <div class="caption">Male&nbsp</div>
                <div class="popcontain1">
                    <div class="apop1">&nbsp Fresh Talent</div>
                    <div class="apop2">Mature Models&nbsp </div>
                    <div class="apop3">&nbsp Active Models</div>
                </div>
            </div>


        <div class="gutter1">
        </div>

        <div class="column2">
            <div class="pic2"><image src= "images/talentdatabase/back/woman.png" height="100%" width="100%"/></div>
            <div class="caption">Children&nbsp</div>
            <div class="popcontain2">
                <div class="bpop1">&nbsp Boy</div>
                <div class="bpop2">G &nbsp i &nbsp r &nbsp l &nbsp </div>
            </div>
        </div>

        <div class="gutter2">
        </div>

        <div class="column3">
            <div class="pic3"><image src= "images/talentdatabase/back/child.png" height="100%" width="100%"/></div>
            <div class="caption">Female&nbsp</div>
            <div class="popcontain3">
                <div class="apop1">&nbsp Fresh Talent</div>
                <div class="apop2">Mature Models&nbsp </div>
                <div class="apop3">&nbsp Active Models</div>
            </div>
        </div>
    </div>

    <div class="bottombar">
        <a href="index.html"><div class="one">
            <h3>Home</h3>
        </div></a>

        <div class="bottomleft">
            <h3></h3>
        </div>

    </div>
  </body>

  </html>

What I've been trying to do is make popcontain1 turn visible when column1 is mouseover-ed.

The css is:

.container{
position:absolute;
width:80%;
height:75%;
top:20%;
left:10%;

}
.column1{
visibility:visible;
font-family:deconeuelight;
position:absolute;
width:32%;
height:100%;
padding:0px;
color:white;
}

.popcontain1{
display:none;

}

.apop1{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(247, 121, 0);
background: rgba(247, 121, 0, .6);
width:100%;
top:60%;
}

.apop2{
    position:absolute;
    text-align:right;
    font-size:1.5em;
    background: rgb(255, 241, 35);
    background: rgba(255, 241, 35, .4);
    width:100%;
    top:70%;
}

.apop3{
    position:absolute;
    text-align:left;
    font-size:1.5em;
    background: rgb(50, 205, 50);
    background: rgba(50, 205, 50, .6);
    width:100%;
    top:80%;
}

For this I've been using the following code in the javscript file:

  $(document).ready(function() {
    $(".column1").hover(function () {
        $(".popcontain1").toggle();
    })
})

EDIT: Am I including all the right libraries? I'm using the google hosted jquery library.

nkorai
  • 145
  • 1
  • 11
  • You should, if you can, use a more up-to-date version of jQuery, but the library is loading fine for me. – andyb May 25 '13 at 06:43
  • I think I need to see a demo without broken images. Can you make one please? – andyb May 25 '13 at 06:50

2 Answers2

0

Since you have multiple use an CSS attribute selector to find the element whose class starts with popcontain with:

  $("[class^=column]").hover(function () {
      $("[class^=popcontain]").toggle();
  })
andyb
  • 43,435
  • 12
  • 121
  • 150
  • That's how it is in the code, just made that error copying it onto here. Changing it to 1 does not help. – nkorai May 25 '13 at 06:34
  • But what about the other version in my answer? That seems to work – andyb May 25 '13 at 06:37
  • You have column1, column2, column3 so need a selector that can find `popcontain1` inside `column1`, etc... - see updated answer – andyb May 25 '13 at 06:50
0

First thing you are trying to display a div with class pop contain which is not present there. So why its not displaying.

Second thing you are using toggle inside hover first argument function, so next time if you will hover the column it will hide popcontain1 div.

Looking your code it seems you want to apply hover on each column and display popcontain inside it. So why not make it generic. Add a common class on every column div say 'column' and on popcontain div say'popcontain';

Now this will work for all div.

If you want to show it on mouse over and hide on mouse out.

$(document).ready(function() {
    $(".column").hover(function () {
        $(this).find(".popcontain").toggle();
    },function(){
        $(this).find(".popcontain").toggle();
    })
})

If you want to permanently show it on first hover.

$(document).ready(function() {
    $(".column").hover(function () {
        $(this).find(".popcontain").show();
    })
})

However you don't need to use jquery if you just want to show hide the inner popcontain. Following css will help you to achieve what you want.

.popcontain{
     display:none;
}
.column:hover .popcontain{
     display:block;
}

Edit for your first comment

If you are trying it on local put http: in the link you have included jquery. change this link

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

to 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

If you are not putting http: it is searching jquery file on local file system instead of web.

Sudhanshu Yadav
  • 2,323
  • 18
  • 18
  • The last bit helped me the most. As a follow up, my javascript works well on jfiddle, however does not work when I'm testing the code on the files on my machine. Do you think you know why that is? – nkorai May 25 '13 at 06:55
  • Please read http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just – andyb May 25 '13 at 07:57