0
オプションコンテナクラスの高さに基づいてコンテナの余白を増やすシステムを作成していますが、イベントが呼び出されたときにオプションコンテナクラスは拡張されません。mouseenter（）イベントが初めて完全に動作しない
2回目以降は、マウスがヘッダーの上に移動するとテキストが表示されますが、余白は伸びませんが、もう一度やり直すと拡張されます。問題が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>
あなたのコードを大胆に読み取ることができます;）あなたは実際にあなたの問題を見ることができるようにjsfiddleを作ることができますか？ –