該腳本代碼在Firefox和Internet Explorer中可以正常運行，但在谷歌瀏覽器中則無法運行

Question

這是我的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>

Answer 1

您的代碼幾乎可以正常使用： 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')

Answer 2

嗯，這很有趣。 我已經對您的提琴進行了優化，具有諷刺意味的是，它對我測試過此功能的所有瀏覽器（鉻除外）都適用。 在Chrome瀏覽器中，它僅適用於第一次。 但是之后，它不能很好地顯示元素。 以下是代碼段。

$(document).ready(function() {
    // hold curr display
    var currText = null;
    // hide all tabs
    // $('.tab-text').hide();

    // action when hovering
    $('.tab-container').each(function() {
        $(this).hover(function() {
            currText = $(this).find('.tab-text');
            currText.show(); // doesn't work perfectly in chrome after hide() call
        }, function(){
            currText.hide(); 
        });
    });
});

小提琴

我所做的是將.hover()函數分配給每個帶有類tab-container div。 當懸停父div時，我已經使用變量currText將找到的元素存儲在那里，而不必重新搜索正確的元素。

另外，我已經以適當的格式修改了HTML結構。 （fe / <img> -tag中缺少）。 除此之外，默認情況下隱藏的元素是由CSS完成的。

我現在將發布此答案，以通知您使用hide()函數后show()不能正常工作。 我將找出它是否是錯誤，並且可以解決。

更新1

當嘗試僅在CSS中完成相同操作時，它具有與上述腳本相同的行為。 但是當查看CSS時，我發現chrome的浮動元素存在問題。

如果我使用下面的CSS將您的圖片浮動到左側，則腳本可以正常運行 。

.tab-container img {
    float: left;
}

當然，Chrome瀏覽器的多個浮動CSS值存在問題。 我還注意到.tab-content選擇器有兩個浮點數，一個向左，然后一個向右。

請檢查Chrome和FF中更新的小提琴 。 現在，添加上述CSS規則后，它可以按預期工作。 我將向chrome提交錯誤報告，因為這是chrome末端的不合格行為。

我希望這能解決您的問題。