悬停时显示图像，不显示时消失

Question

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>

An example to clarify: If I hover over the letter "N", an image would appear. When I move to hover to the letter "A", another image would appear and the image that appeared from "N" would disappear.

Answer 1

Im a bit confused at exactly what you want. This may be a case where using :not in CSS will do what you want though. So if I had several images and only wanted the hovered image to be visible I would add

 img { position: absolute; left: 50%; top: 20px; width: 100px; height: 100px; opacity: 0; transition: opacity 0.5s; } #backdrop { position: absolute; top:0; width:0; height: 250px; z-index:-1; transition: width.5s; }.letters { width: min-content; } h2 { position: relative; left: 20px; } /*class1 hover effects*/.class1:hover ~ #img1{ opacity: 1; }.class1:hover ~ #backdrop{ width: 100%; background: #3a50d9; }.class1:hover ~.hero-pro h2, .hero{ font-family: 'Codystar', cursive; font-size: 30pt; font-weight: 700; text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27; } /*class2 hover effects*/.class2:hover ~ #img2{ opacity: 1; }.class2:hover ~ #backdrop{ width: 100%; background: #005dff; }.class2:hover ~.hero-pro h2, .hero{ font-family: 'Press Start 2P', cursive; font-size: 30pt; font-weight: 700; text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd; } /*class3 hover effects*/.class3:hover ~ #img3{ opacity: 1; }.class3:hover ~ #backdrop{ width: 100%; background: yellow; }.class3:hover ~.hero-pro h2, .hero{ font-family: 'Press Start 2P', cursive; font-size: 30pt; font-weight: 700; text-shadow: -5px 5px 0px #00e6e6, -10px 10px 0px #01cccc, -15px 15px 0px #00bdbd; }

 <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Codystar&display=swap" rel="stylesheet"> <:-- Banner Section --> <section id="banner"> <div class="hero-name"> <div class="class1 letters">Y</div> <div class="class2 letters">O</div> <div class="class3 letters">U</div> <div class="class4 letters">R</div> <div class="class5 letters"></div> <div class="class6 letters">N</div> <div class="class7 letters">A</div> <div class="class8 letters">M</div> <div class="class9 letters">E</div> <div id="backdrop"></div> <div class="hero-pro"> <h2>Title Here</h2> </div> <img id ="img1" src="https.//www.pinclipart.com/picdir/middle/84-849138_gold-chain-gangster-clipart:png" alt="sonic"/> <img id ="img2" src="https.//upload.wikimedia.org/wikipedia/commons/thumb/0/06/Pac_Man.svg/1200px-Pac_Man.svg:png" alt="pacman"/> <img id ="img3" src="https.//www.clipartmax.com/png/middle/27-279319_donkey-kong-png-photo-donkey-kong-king-of-swing:png" alt="dk"/> <img id ="img4" src="https.//www.vhv.rs/dpng/d/574-5744697_tails-sonic-and-all-stars-racing-transformed-tails.png" alt="tails"/> </div>

Answer 2

Use opacity so your image retains its dimensions.

 #img1 { position: absolute; left: 41%; bottom: 60%; opacity: 0; } #img1:hover { opacity: 1; }

 <:-- Banner Section --> <section id="banner"> <img id="img1" src="https.//placekitten.com/200/300" 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> </section>