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

为此，我一直在 javscript 文件中使用以下代码：

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

编辑：我是否包括所有正确的库？我正在使用谷歌托管的 jquery 库。

4

2 回答 2

0

由于您有多个使用 CSS属性选择器来查找其类以以下开头 popcontain的元素：

  $("[class^=column]").hover(function () {
      $("[class^=popcontain]").toggle();
  })
于 2013-05-25T06:25:29.280 回答
0

您尝试显示的第一件事是带有类 pop contains 的 div 不存在。那么为什么它不显示。

您在悬停第一个参数函数中使用切换的第二件事，因此下次如果您悬停该列，它将隐藏 popcontain1 div。

查看您的代码，您似乎想在每列上应用悬停并在其中显示 popcontain 。那么为什么不让它通用。在每列 div say ' column' 和 popcontain div say' popcontain' 上添加一个公共类；

现在这将适用于所有 div。

如果您想在鼠标悬停时显示它并在鼠标移出时隐藏。

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

如果您想在第一次悬停时永久显示它。

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

但是，如果您只想显示隐藏内部 popcontain，则不需要使用 jquery。遵循 css 将帮助您实现您想要的。

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

编辑您的第一条评论

如果您在本地尝试它 http: 在您包含 jquery 的链接中。更改此链接

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

到

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

如果你没有放 http: 它是在本地文件系统而不是 web 上搜索 jquery 文件。

于 2013-05-25T06:40:51.027 回答