0

マウスをコンテナー div の上に移動すると、コンテナー div 内の div が表示されるようにしようとしています。現在、表示する必要がある div のプロパティ display は none に設定されています。私は何度もこれをjavascriptで機能させようとしましたが、役に立ちませんでした。誰かが私を助けてくれますか？コードは以下に含まれています。

  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>

私がやろうとしているのは、column1 がマウスオーバーされたときに popcontain1 が見えるようにすることです。

CSSは次のとおりです。

.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%;
}

このために、javascript ファイルで次のコードを使用しています。

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

編集:すべての適切なライブラリを含めていますか? Google がホストする jquery ライブラリを使用しています。

4

2 に答える 2