文章/答案/技术大牛

发布

社区首页 >问答首页 >[医]滑鼠，mouseEnter

问[医]滑鼠，mouseEnter
EN

Stack Overflow用户

提问于 2017-07-06 07:49:28

回答 5查看 74关注 0票数 2

我有一个常见问题和问题页。如果用户用鼠标悬停在一个问题上，那么答案就会显示出来。

但是如果你现在对一个问题犹豫不决，所有的答案都会显示出来。不应该是的。只有选定问题的答案才是可见的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>A One Page Faq</title>
    <link href="Content/site.css" rel="stylesheet">
    <script src="Scripts/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.answer').hide();
            var $answer = $(this).next('.answer');
            $('.main h2').mouseover(function () {
                $('.answer').show();
                $answer.slideDown();
                $(this).addClass('close');
            });
            $('.main h2').mouseout(function () {
                $('.answer').hide();
                $answer.fadeOut();
                 $(this).removeClass('close');
            });           

        }); // end ready
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="content">
            <div class="main">
                <h1>A One Page FAQ</h1>
                <div class="faq">
                    <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
                    <div class="answer">
                        <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)</p>
                    </div>
                </div>
                <div class="faq">
                    <h2>Can JavaScript really solve all of my problems?</h2>
                    <div class="answer">
                        <p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
                    </div>
                </div>
                <div class="faq">
                    <h2>Is there nothing JavaScript <em>can&#8217;t</em> do?</h2>
                    <div class="answer">
                        <p>Why, no there isn&#8217;t! It&#8217;s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that&#8217;s one smart programming language!</p>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
        </footer>
    </div>
</body>
</html>

谢谢

如果我这样做：

 $(document).ready(function () {
            $('.answer').hide();
            var $answer = $(this).next('.answer');


            $('.main h2').mouseover(function (e) {
                $('.answer').hide();//Hide All Other Answers
                $(e).closest('.answer').show();//Show Closest Answer To Question
            });


            $('.main h2').mouseout(function (e) {
                $('.answer').hide();
            });

什么都没发生

jquery

html

回答 5

Stack Overflow用户

回答已采纳

发布于 2017-07-06 07:56:37

替换此

 $('.main h2').mouseover(function () {
     $('.answer').show();
     $answer.slideDown();
     $(this).addClass('close');
 });
 $('.main h2').mouseout(function () {
     $('.answer').hide();
     $answer.fadeOut();
     $(this).removeClass('close');
 });

与

$('.main h2').mouseover(function () {
   $(this).siblings('.answer').show();
   $(this).siblings('.answer').slideDown();
   $(this).addClass('close');
});
$('.main h2').mouseout(function () {
   $(this).siblings('.answer').hide();
   $(this).siblings('.answer').fadeOut();
   $(this).removeClass('close');
});

会对你有帮助的。

票数 2

Stack Overflow用户

发布于 2017-07-06 07:57:16

试着这样;]

$(document).ready(function () {
    $('.answer').hide();

    $('.main h2').on('mouseover', function () {
        $(this).next().slideDown(300);
        $(this).addClass('close');
    });
    $('.main h2').on('mouseout', function () {
        $(this).next().slideUp(300);
        $(this).removeClass('close');
    });           

}); // end ready

h2 {
    background: url(_images/open.png) no-repeat 0 11px;
    padding: 10px 0 0 25px;
    cursor: pointer;
}

    h2.close {
        background-image: url(_images/close.png);
    }

.answer {
    margin-left: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
        <header>

        </header>
        <div class="content">
            <div class="main">
                <h1>A One Page FAQ</h1>
                <div class="faq">
                    <h2>I've heard that JavaScript is the long-lost fountain of youth. Is this true?</h2>
                    <div class="answer">
                        <p>Why, yes it is! Studies prove that learning JavaScript freshens the mind and extends life span by several hundred years. (Note: some scientists disagree with these claims.)</p>
                    </div>
                </div>
                <div class="faq">
                    <h2>Can JavaScript really solve all of my problems?</h2>
                    <div class="answer">
                        <p>Why, yes it can! It's the most versatile programming language ever created and is trained to provide financial management advice, life-saving CPR, and even to take care of household pets.</p>
                    </div>
                </div>
                <div class="faq">
                    <h2>Is there nothing JavaScript <em>can&#8217;t</em> do?</h2>
                    <div class="answer">
                        <p>Why, no there isn&#8217;t! It&#8217;s even able to write its own public relations-oriented Frequently Asked Questions pages. Now that&#8217;s one smart programming language!</p>
                    </div>
                </div>
            </div>
        </div>
        <footer>
            <p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
        </footer>
    </div>

票数 1

Stack Overflow用户

发布于 2017-07-06 07:56:37

之所以会发生这种情况，是因为您使用了类选择器，它实际上选择了具有这个类$('.answer').show();的所有元素。

您需要更改代码以选择与问题最接近的答案，并显示如下所示

            $('.main h2').mouseover(function (e) {
               $('.answer').hide();//Hide All Other Answers
               $(e).closest('.answer').show();//Show Closest Answer To Question


            });

对老鼠来说

$('.main h2').mouseout(function (e) {
   $('.answer').hide();
});

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44942815

复制

相似问题

问[医]滑鼠，mouseEnter
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问[医]滑鼠，mouseEnterEN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问[医]滑鼠，mouseEnter
EN