Mouseoverイベントは正常に動作しますが、一度は

Question

私はJavaScriptの初心者ですので、助けてください。

私はCSSでイメージのホバーを作成しましたが、このホバーにコンテンツのインタラクションを追加する必要があります。 JavaScriptを使用しました。私が望むように動作しますが、一度だけ、私はブラウザをリフレッシュする必要があります。 Here is a CodePen which shows how it works.

またコード：

var content = document.getElementById('fav-project-content'); 
 
var imgContent = document.getElementById('fav-project-img'); 
 

 
imgContent.addEventListener('mouseover', rev); 
 
imgContent.addEventListener('mouseout', hid); 
 

 
function rev() { 
 
    if (content.className === "hide") { 
 
    content.className = ""; 
 
    } 
 
    TweenMax.from(content, 0.5, { 
 
    x: 1500, 
 
    opacity: 0, 
 
    ease: Quad.easeOut 
 
    }); 
 
}; 
 

 
function hid() { 
 
    TweenMax.to(content, 0.5, { 
 
    x: 1500, 
 
    opacity: 0, 
 
    ease: Quad.easeOut 
 
    }); 
 
};

.content { 
 
    margin-top: 19vw; 
 
    margin-bottom: 5vw; 
 
} 
 
#fav-project-img { 
 
    background-image: url(http://dannnk.com/test/images/spiro-bw.jpg); 
 
    background-size: cover; 
 
    position: relative; 
 
    width: 30%; 
 
    display: inline-block; 
 
    min-height: 578px; 
 
    -webkit-transition: all 0.5s cubic-bezier(.78, .54, .47, .88); 
 
    -moz-transition: all 0.5s cubic-bezier(.78, .54, .47, .88); 
 
    transition: all 0.5s cubic-bezier(.78, .54, .47, .88); 
 
} 
 
#fav-project-img:hover { 
 
    background-image: url(http://dannnk.com/test/images/spiro.jpg); 
 
    width: 42%; 
 
    margin-left: -1%; 
 
} 
 
#fav-project-content { 
 
    background-color: #f7f0e8; 
 
    position: relative; 
 
    display: inline-block; 
 
    float: right; 
 
    width: 59%; 
 
    height: 578px; 
 
} 
 
#fav-project-content.hide { 
 
    display: none; 
 
}

<div class="content"> 
 
    <div id="fav-project-img"></div> 
 
    <div id="fav-project-content" class="hide"></div> 
 
</div>

私が書いたように、私はJavaScriptで初心者です。おそらく、ここで私のコードに問題があります。何が間違っているか私に見せてもらえますか

Answer 1

私のために働いています。 btwあなたはjavascriptなしで同じことを達成することができます。 cssを使用し、画像のコンテナと画像のスタイルを：hoverセレクタで行います。アニメーションはトランジションプロパティを使用できます。 例：

.image-container{ 
    transition: all .3s ease; 
    width: 200px; 
} 
.image-container:hover{ 
    width: auto; 
} 
.image{ 
    -webkit-filter: saturation(0); 
    transition: all .3s ease; 
} 
.image-container:hover .image{ 
    -webkit-filter: saturation(1); 
}