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

它爲我工作。 順便說一句，你可以實現沒有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); 
}