脚本代码在 Firefox 和 Internet Explorer 中运行良好，但在 google chrome 中运行不正常

Question

这是我用于显示隐藏 div 的 html 和脚本代码。在 google chrome 中不工作，但在 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。在 chrome 中，它仅第一次起作用。但在它之后，它无法很好地显示元素。下面是一个sn-p。

$(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(); 
        });
    });
});

   Fiddle

我所做的是将.hover() 函数分配给每个找到的具有tab-container 类的div。我使用了一个变量currText 将找到的元素存储在其中，当您将父 div 悬停时，您不必重新搜索正确的元素。

另外，我已经以适当的格式调整了 HTML 结构。 （<img>-tag 中缺少 /）。 除此之外，默认隐藏的元素是由 CSS 完成的。

我现在将发布此答案，以通知您使用hide() 功能后show() 无法正常工作。我去看看是不是bug，能不能解决。

更新 1

当尝试仅在 CSS 中完成相同的操作时，它的行为与上述脚本相同。但是在查看 CSS 时，我发现 chrome 的浮动元素存在问题。

如果我使用下面的 CSS 将您的图像浮动到左侧，则脚本可以正常工作。

.tab-container img {
    float: left;
}

当然，Chrome 的多个浮动 CSS 值存在问题。我还注意到.tab-content 选择器有两个浮动，一个向左，一个向右。

请检查 chrome 和 FF 中的 updated fiddle。现在它在添加上述 CSS 规则后按预期工作。我将向 chrome 提交错误报告，因为这是 chrome 结束时的不合格行为。

我希望这能解决您的问题。