Question

我试图让div显示两个图像中的一个，具体取决于用户将鼠标悬停在哪个div上。下面的解决方案有效，但仅适用于#FH_Blurb的鼠标悬停，#HDS_Blurb的鼠标悬停无法执行任何操作。

知道为什么吗？两个图像都存在于images文件夹中。

HTML：

<div class="row" >
        <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_left">
            <div class="feature" id="FH_Blurb">
                <h4>Fizz+Hummer</h4>
                <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
                </p>
            </div>
        </div>
        <div class="col-sm-4 col-md-4 ol-lg-4">
            <div class="features_3_content_center">
                <img src="images/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img">
                <img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_image" alt="img">
            </div>
        </div>
        <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_right">
            <div class="feature" id="HDS_Blurb">
                <div>
                <h4 class="we_make_games_HDS_text">Human Delivery Service</h4>
                <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
                </p>
                </div>
            </div>
     </div>
</div>

JQuery的：

PicChanger: function(){

    $('#features3_FH_image, #features3_HDS_image').hide();           

    $('#FH_Blurb').hover(function() {
      $('#features3_FH_image').toggle();
    });

    $('#HDS_Blurb').hover(function() {
      $('#features3_HDS_image').toggle();
    });
},

Answer 1

试试这个

DeEntitize

//修改

尝试在不同的div上设置每个图像。

Answer 2

您需要br代码。

<div class="row">
        <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_left">
            <div class="feature" id="FH_Blurb">
                <h4>Fizz+Hummer</h4>
                <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
                </p>
            </div>
        </div><br>
        <div class="col-sm-4 col-md-4 ol-lg-4">
            <div class="features_3_content_center">
                <img src="images/FH_MainMenu.png" class="img-responsive" id="features3_FH_image" alt="img">
                <img src="images/HDS_MainMenu.png" class="img-responsive" id="features3_HDS_image" alt="img">
            </div>
        </div>
        <div class="col-sm-4 col-md-4 ol-lg-4" id="features_3_content_right">
            <div class="feature" id="HDS_Blurb">
                <div>
                <h4 class="we_make_games_HDS_text">Human Delivery Service</h4>
                <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum.
                </p>
                </div>
            </div>
     </div>
</div>

Answer 3

我建议使用带有悬停的handleOut回调：

$(selector).hover(function(){
 //do something 
}, function(){
 //do something 
});

然后使用.css / .animate / .slideUp，.slideDown或您认为适合您最终结果的任何内容。

还要检查.stop（）和.delay（）jQuery API以防止传播。

Jquery div切换只适用于一个div

3 个答案: