我正在创建一个系统，它根据option-container类的高度增加容器的边距，但问题是当调用该事件时，它不会扩展option-container类。 / p>
仅在第二次完全延伸后，即当鼠标悬停在标题上时，文本出现但边距不会延伸，但如果我再次执行它会延伸。如果只能用javaScript / Jquery修复问题，将不胜感激。提前谢谢！
这是javaScript：
$(".option1").mouseenter(function() {
$("#info2, #info3, #info4").fadeOut(20);
$("#info1").delay(50).fadeIn(200);
$("#height1").height();
var infoHeight1 = $("#height1").height();
$(".option-container").delay(100).animate({
marginBottom: "22px"
}, 300);
$("#option-container1").animate({
marginBottom: infoHeight1 + 20
}, 300);
$(".option2, .option3, .option4").css({
"text-decoration": "none"
});
$(this).css({
"text-decoration": "underline"
});
});
$(".option2").mouseenter(function() {
$("#info1, #info3, #info4").fadeOut(20);
$("#info2").delay(50).fadeIn(200);
$("#height2").height();
var infoHeight2 = $("#height2").height();
$(".option-container").delay(100).animate({
marginBottom: "22px"
}, 300);
$("#option-container2").animate({
marginBottom: infoHeight2 + 20
}, 300);
$(".option1, .option3, .option4").css({
"text-decoration": "none"
});
$(this).css({
"text-decoration": "underline"
});
});
$(".option3").mouseenter(function() {
$("#info1, #info2, #info4").fadeOut(20);
$("#info3").delay(50).fadeIn(200);
$("#height3").height();
var infoHeight3 = $("#height3").height();
$(".option-container").delay(100).animate({
marginBottom: "22px"
}, 300);
$("#option-container3").animate({
marginBottom: infoHeight3 + 20
}, 300);
$(".option1, .option2, .option4").css({
"text-decoration": "none"
});
$(this).css({
"text-decoration": "underline"
});
});
$(".option4").mouseenter(function() {
$("#info1, #info2, #info3").fadeOut(200);
$("#info4").delay(50).fadeIn(200);
$("#height4").height();
var infoHeight4 = $("#height4").height();
$(".option-container").delay(100).animate({
marginBottom: "22px"
}, 300);
$("#option-container4").animate({
marginBottom: infoHeight4 + 20
}, 300);
$(".option1, .option2, .option3").css({
"text-decoration": "none"
});
$(this).css({
"text-decoration": "underline"
});
}); .header {
display: inline-block;
position: relative;
background-color: rgb(81, 154, 226);
font-size: 2.3em;
height: 100px;
color: white;
font-family: 'saira', arial;
text-shadow: 2px 2px #2280dd;
width: 250px;
text-align: center;
text-transform: uppercase;
margin: auto;
top: 70px;
-webkit-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
box-shadow: 0px 12px 60px -17px rgba(0,0,0,0.75);
z-index: 1;
line-height: 100px;
}
#container {
text-align: center;
width: 100%;
}
.option-container {
display: inline-block;
width: 250px;
margin: 22px 22px 100px 22px;
}
.info-container {
position: absolute;
width: 100%;
right: 0;
left: 0;
height: 100%;
}
.option-info {
display: inline-block;
position: relative;
width: 100%;
font-family: 'roboto', arial;
font-size: 1.3em;
text-align: center;
color: black;
color: rgba(0, 0, 0, 0.9);
margin: auto;
top: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="option-container1" class="option-container">
<div class="header option1">
<h2>hardware</h2>
</div>
<div class="info-container">
<div id="info1" class="option-info">
<div id="height1" class="info-height">
<p>
By choosing hardware we will tailor your content by sending you tutorials and information about hardware, based on your preference. Such as how to pick out the components of a computer and understanding the specifications of PC components as to <span class="highlight">make a more informed decision</span> when looking to buy them.
</p>
<p>
We will also tailor the promotions sent by us to accommodate your wants and needs. We will give you things like overclocking guides and of course how to build a computer. If you choose hardware you will also have the chance to <span class="highlight">join our premium membership</span> and getting a full course on hardware, based on your past knowledge.
</p>
<p id="info-disc1">You have picked hardware as an interest</p>
<p class="mobile">Tap the option to select it</p>
</div>
</div>
</div>
</div>
<div id="option-container2" class="option-container">
<div class="header option2">
<h2>design</h2>
</div>
<div class="info-container">
<div id="info2" class="option-info">
<div id="height2" class="info-height">
<p>
Graphic design can be a great tool when you know what you are doing; without proper knowledge about the things that look good or how to make your ideas come to life, it is very hard to make something look nice.</p>
<p> We will teach you everything from how to design a website using CSS to making digital posters, and how to <span class="highlight">make it beautiful.</span>
</p>
<p>
We will send you tutorials on website design, font contrast, recommendations on graphic design tools and much, much more.
</p>
<p id="info-disc2">You have picked design as an interest</p>
<p class="mobile">Tap the option to select it</p>
</div>
</div>
</div>
</div>
<div id="option-container3" class="option-container">
<div class="header option3">
<h2>software</h2>
</div>
<div class="info-container">
<div id="info3" class="option-info">
<div id="height3" class="info-height">
<p>
The software is the backbone of any program on the internet. So it is necessary to have the knowledge of what programs are best suited for you or perhaps even how to <span class="highlight">start making your own digital creations</span>. We will teach you how to properly manage your files and the important rules of online security; because the best anti-virus is your knowledge of what is secure and what is not.
</p>
<p>
We will send you recommendations on software that we find helpful and <span class="highlight">improve your digital experience</span> and will give you the opportunity to join our premium membership where we will teach you the intricacies of software development and what to start with when developing an application.
</p>
<p id="info-disc3">You have picked software as an interest</p>
<p class="mobile">Tap the option to select it</p>
</div>
</div>
</div>
</div>
<div id="option-container4" class="option-container">
<div class="header option4">
<h2>gaming</h2>
</div>
<div class="info-container">
<div id="info4" class="option-info">
<div id="height4" class="info-height">
<p>
PC gaming is the pinnacle of digital entertainment and can be a great way to have fun and make friends, so it is important that you money gets you the <span class="highlight">best value games and performance</span>; spending 60$ on a single game only to find it is not for you is a bad bargain.
</p>
<p>
By choosing gaming you will get the complete guide to gaming. We will help you pick out the right peripherals, how to optimize the game settings, <span class="highlight">get the most out of your gaming experience</span> and how to pick out graphics cards.
</p>
<p id="info-disc4">You have picked gaming as an interest</p>
<p class="mobile">Tap the option to select it</p>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：-1)
我以前见过这种问题，对我自己来说，问题是因为我没有显示：阻止事件被触发的元素。
输入元素后，浏览器会自动添加display：block样式，允许事件在第二次尝试时起作用。