Jquery只为一个div工作。

Question

我试图让div显示两个图像中的一个，这取决于用户停留在哪个div上。下面的解决方案是可行的，但只适用于#FH_Blurb的鼠标控制，#HDS_Blurb的鼠标操作不起任何作用。

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

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

试试这个

$( document ).ready(function() {
      //code here   });

//编辑

尝试将每个图像设置在不同的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/ .动画/ .slideUp、.slideDown或您认为适合于最终结果的任何东西。

还可以查看.stop()和.delay() jQuery API，以防止传播。