Make image appear when hovering and dissapear when not

  css, html, javascript, jquery

I have a div that I want an image to appear when it is hovered on and disappear when moved to another div (which will show another image instead). I tried to set it to display: none from the css file and show it again in jQuery with display: normal, but it feels wrong and apparently is wrong too, any suggestions on how to make it work?

const imgOne = () => {
    $("#img1").css('display', 'normal')
}

$(document).ready(function () {
    $(".class4").hover(function() {
        $('#banner').css('background', '#3a50d9')
        $(".hero-name div").css('color', '#ffffff')
        $("#banner h2").css("font-family", 'Codystar, cursive')
        $('#banner h2').css('font-size', '6vmin')
        $("#banner h2").css("font-weight", "700")
        $(".hero-name div").css('text-shadow', '-4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27')
    })

    $(".class5").hover(function() {
        $('#banner').css('background', '#005dff')
        $(".hero-name div").css('color', '#ffffff')
        $("#banner h2").css("font-size", '4vmin')
        $("#banner h2").css("font-family", '"Press Start 2P", cursive')
        $(".hero-name div").css('text-shadow', '-5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd')

        // Images
        imgOne()
    })
}
#img1 {
    position: absolute;
    left: 41%;
    bottom: 60%;
    display: none;
}
        <!-- Banner Section -->
        <section id="banner">
            <img id ="img1" src="resources/frozen.svg" alt="pacman" type="png"> 
            <div class="hero-name">
                <div class="class1">Y</div>
                <div class="class2">O</div>
                <div class="class3">U</div>
                <div class="class4">R</div>
                <div class="class5"></div>
                <div class="class6">N</div>
                <div class="class7">A</div>
                <div class="class8">M</div>
                <div class="class9">E</div>
                <div class="hero-pro">
                    <h2>Title Here</h2>
                </div>
            </div>

Source: Ask Javascript Questions

LEAVE A COMMENT