gpt4 book ai didi

jquery - 鼠标悬停,鼠标输入

转载 作者:太空宇宙 更新时间:2023-11-04 15:56:50 24 4
gpt4 key购买 nike

我有一个常见问题解答和问题页面。如果用户将鼠标悬停在问题上,则会显示答案。

但是,如果您现在将鼠标悬停在一个问题上,则会显示所有答案。不必是什么。只有所选问题的答案必须可见。

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

什么都没发生

最佳答案

替换这个

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

它会帮助你。

关于jquery - 鼠标悬停,鼠标输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44942815/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com