jQuery 鼠标悬停在第一个实例上不起作用，使用按钮淡入/淡出多个 div

如何解决jQuery 鼠标悬停在第一个实例上不起作用，使用按钮淡入/淡出多个 div

我正在构建一个左侧有三个按钮的网站，当鼠标悬停时，右侧的 div 会淡入/淡出。我的东西设置得很好，但是由于某种原因，当页面第一次加载并且您将鼠标悬停在第二个或第三个项目上时，它会突然出现而不会淡入。一旦这样做，它会在其余时间消失得很好，除非页面是神清气爽。任何人都可以就为什么会发生这种情况提供任何建议吗？

https://jsfiddle.net/boysfromjupiter/rz4md02h/4/

HTML：

<div style="width:40%;float:left;display: flex;
  flex-direction: column-reverse;">

<div class="flyy design" id="menu3" data-divid="div3" style="width:100%;height:80px;background:#;">
                <span class="sub">The Process</span><br><span class="title">Design</span>
            </div>

<div class="flyy analysis bofa2" id="menu2" data-divid="div2" style="width:100%;height:80px;background:#;">
                <span class="sub">The Process</span><br><span class="title">Analysis</span>
            </div>

<div class="flyy empathy" id="menu" data-divid="div1" style="width:100%;height:80px;background:#;">
                <span class="sub">The Process</span><br><span class="title">Empathy</span>
            </div>




</div>

<div style="width:60%;float:left;">

<div class="flyout" id="div1">People and place is where<br>
any authentic brand begins.<br>
<br>
We immerse ourselves in both.</div>

<div class="flyout2 hidden" id="div2">Understanding and positioning<br>
 ourselves in a competitive context<br>
 is how we differentiate.<br>
<br>
Analysis enables anticipation.</div>

<div class="flyout3 hidden" id="div3">Brands are visualized strategy <br>
and need to be understood intuitively by your <br>
most important audiences.</div>

<div class="flyout4">People and place is where<br>
any authentic brand begins.<br>
<br>
We immerse ourselves in both.</div>



</div>

JavaScript：

$('.flyy').mouSEOver(function() {
    $(this).addClass('hover');
    $('#' + $(this).data('divid')).stop().css({
        display: 'block'
    }).animate({
        opacity: 1
    },500);
});

$('.flyy').mouSEOut(function() {
    $(this).removeClass('hover');
    $('#' + $(this).data('divid')).stop().animate({
        opacity: 0
    },500,function() {
        $(this).hide();
    });
});

CSS：

.bofa1:link {
  opacity: 1;
  transition: 0.5s
}

.bofa1:visited {
  opacity: 1;
  transition: 0.5s
}

.bofa1:hover {
  opacity: 1;
  transition: 0.5s
}


.bofa2 {
  opacity: 0.5;
  transition: 0.5s
}

.bofa2:visited {
  opacity: 0.5;
  transition: 0.5s
}

.bofa2:hover {
  opacity: 1;
  transition: 0.5s
}

.flyout {
  position: fixed;
  width: 53%;
  height: 500px;
  overflow: hidden;
  z-index: 10000;
  background: #ffffff;
  background-image: url('/img/empathybg.png');
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: bottom right;
  color: #5c8d99;
  font-family: 'millerlight';
  font-weight: 200;
  font-size: 1em;
}

.flyout2 {
  position: fixed;
  width: 53%;
  height: 500px;
  background: #ffffff;
  overflow: hidden;
  z-index: 10000;
  background-image: url('/img/analysisbg.png');
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: bottom right;

  color: #5c8d99;
  font-family: 'millerlight';
  font-weight: 200;
  font-size: 1em;
}

.flyout3 {
  position: fixed;
  width: 53%;
  height: 500px;
  background: #ffffff;
  overflow: hidden;
  z-index: 10000;
  background-image: url('/img/designbg.png');
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: bottom right;
  color: #5c8d99;
  font-family: 'millerlight';
  font-weight: 200;
  font-size: 1em;
}

.flyout4 {
  position: fixed;
  width: 53%;
  height: 500px;
  overflow: hidden;
  z-index: 9000;
  background: #ffffff;
  background-image: url('/img/empathybg.png');
  background-repeat: no-repeat;
  background-size: 85%;
  background-position: bottom right;
  color: #5c8d99;
  font-family: 'millerlight';
  font-weight: 200;
  font-size: 1em;
}

.hidden {
  display: none;
}

.analysis:hover~.empathy {
  opacity: 0.5;
  transition: 1s
}

.analysis {
  opacity: 0.5;
  transition: 1s;
  position: relative;
  top: -2px;
}

.design {
  opacity: 0.5;
  transition: 1s;
  position: relative;
  top: -4px;
}

.analysis:hover~.design {
  opacity: 0.5;
  transition: 1s;
}

.design:hover {
  opacity: 1;
  transition: 1s
}

.design:hover~.empathy {
  opacity: 0.5;
  transition: 1s;
}

.empathy:hover {
  transition: 1s;
}

.sub {
  font-size: 1em;
  font-family: 'itc_avant_garde_gothicmedium';
  color: #5c8f9a;
}

.title {
  font-size: 2em;
  color: #5c8d99;
  font-family: 'millerlight';
}