在 jQuery 中的同一 div 中悬停时隐藏和显示？

Question

这是 html 部分：

<div class ="row respect-row">
                <div class="col-xs-6">
                    <h2 id ="respect-hover">RESPECT</h2>
                </div>
            </div>
            <div class ="row respect-row-hidden">
                <div class="col-xs-12">
                    <h2 id ="respect-hover">RESPECT</h2>
                    <p id="hidden-respect-paragraph">&#8221;Respect yourself and others will<br> respect you.&#8221; &#8212; Confucius</p>
                </div>
            </div>

这是 jquery 部分：

$(".respect-row").hover(function(){
                $(this).hide();
                $(".respect-row-hidden").show();
            },function(){
                $(this).show();
                $(".respect-row-hidden").hide();
        });

我的问题是悬停时有时会卡住。 class respect-row 和 respect-row-hidden 在页面中的位置相同。即使我在文本 Confucius 上，它也会悬停。我该怎么办？

Answer 1

ID 应为 unique。所以我将重复的 ID 更改为 class。此外，我们需要在这种情况下使用 multiple selector 来避免闪烁。

HTML:

<div class="row respect-row">
    <div class="col-xs-6">
         <h2 class="respect-hover">RESPECT</h2>

    </div>
</div>
<div class="row respect-row-hidden">
    <div class="col-xs-12">
         <h2 class="respect-hover">RESPECT</h2>

        <p id="hidden-respect-paragraph">&#8221;Respect yourself and others will
            <br>respect you.&#8221; &#8212; Confucius</p>
    </div>
</div>

JS:

$(".respect-row,.respect-hover").hover(function () {
    $(this).hide();
    $(".respect-row-hidden").show();
}, function () {
    $(this).show();
    $(".respect-row-hidden").hide();
});

CSS:

.respect-row-hidden {
    display:none;
}

DEMO

Answer 2

试试这个..

HTML:
    <div class ="row respect-row">
                    <div class="col-xs-6">
                        <h2 id ="respect-hover">RESPECT</h2>
                    </div>
                </div>
                <div class ="row respect-row-hidden">
                    <div class="col-xs-12">
                        <h2 id ="respect-hover">RESPECT</h2>
    <p id="hidden-respect-paragraph">Respect yourself and others will respect you.&#8221; &#8212; Confucius</p>
                        </div>
                </div>

 Jquery:

    $( ".respect-row" )
      .on( "mouseenter", function() {
        $( ".respect-row" ).hide();
                    $(".respect-row-hidden").show();
      })
      .on( "mouseleave", function() {
        $( ".respect-row" ).show();
                    $(".respect-row-hidden").hide();
      });

CSS:

.respect-row-hidden {

    display:none;

}

演示：http://jsfiddle.net/29f6k2ut/1/

在 jQuery 中的同一 div 中悬停时隐藏和显示？

Hide and Show on hover in the same div in jQuery?

jquery

hover

DEMO