这是我的show div.html的html和脚本代码,不适用于谷歌浏览器,但在Firefox和ie8中工作正常,我现在该怎么办?请检查我分享的代码。隐藏();节目();功能无法正常工作。

   <script src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
    .tab-container /* this is the css code for the tabs*/
    {
    float:left;
    width:30%;
    //border:1px solid #147D36;
    //border-left:4px solid #147D36;
    margin-left:1.5%;
    margin-right:1.5%;
     }

    .tab-text /* this is the div for the text that is coming on hover*/
     {
    width:97%;
    margin-left:3%;
    float:left;
    background:#fff;
    opacity:0.5;
    color:#1B6298;
    margin-top:-65px;
    z-index:999999;
    /*display:none;*/
     }
     .tab-title/* this is the div for the text title that is coming on hover*/
     {
    float:left;
    width:100%;
    font-weight:bold;
    font-size:18px;
    padding-top:17px;
     }
    .tab-content/* this is the div for the text content that is coming on hover*/
     {
    float:left;
    width:30%;
    float:right;
    font-size:12px;
    padding-bottom:10px;
     }

    </style>
      <!--this is my html code-->
     <div class="tab-container">
     <img src="images/ourmission.png" width="100%">
     <div class="tab-text">
     <div class="tab-title">Our Mission</div>
     <div class="tab-content">read more</div>
     </div>
     </div>
     <div class="tab-container">
     <img src="images/ourfinincial.png" width="100%">
     <div class="tab-text">
     <div class="tab-title">Our Financial</div>
     <div class="tab-content">read more</div>
     </div>
     </div>
     <div class="tab-container">
     <img src="images/ourgoals.png" width="100%">
     <div class="tab-text">
     <div class="tab-title">Our Team</div>
     <div class="tab-content">read more</div>
     </div>
     </div>
     <script>
    /*jquery code for the show and hide function on hover-scripting code */
     $(document).ready(function() {
     $('.tab-text').hide();
     $('.tab-container').hover(function() {
     $(this).find('.tab-text').show();
     }, function() {
     $('.tab-text').hide();
     });
     });
     </script>

最佳答案

您的代码几乎可以正常使用:http://jsfiddle.net/Rq46A/1/

尝试:

$(document).ready(function() {
    $('.tab-text').hide();

    $('.tab-container').hover(function() {
        $('.tab-text').show();
    }, function() {
        $('.tab-text').hide();
    });

});



您不需要2个$(document).ready();
代替$(this).find...使用$('.tab-text')

09-11 18:25
查看更多