Question

当鼠标移到容器div上时，我一直在尝试在容器div中创建一个div。目前，需要显示的div的属性显示设置为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>

我一直在尝试做的事情是，当mouse1被鼠标移除时，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库。

Answer 1

由于您多次使用CSS attribute selector来查找以 popcontain开头的元素：

  $("[class^=column]").hover(function () {
      $("[class^=popcontain]").toggle();
  })

Answer 2

首先要尝试显示一个包含类pop的包含哪个不存在的div。那么为什么它不显示。

你使用的第二件事是在悬停第一个参数函数内部进行切换，所以下次如果你将悬停列，它将隐藏popcontain1 div。

查看代码，似乎您希望将鼠标悬停在每列上并在其中显示popcontain。那么为什么不把它变成通用的。在每个列div上添加一个公共类，例如“column”，并在popcontain div上说“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文件。

Javascript鼠标悬停问题

2 个答案: