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

Question

我有一个 div，我希望图像在悬停时出现并在移动到另一个 div 时消失（它将显示另一个图像）。我试图将它设置为 display: none 从 css 文件并在 jQuery 中再次显示它 display: normal，但感觉不对，显然也是错误的，关于如何使它工作的任何建议？

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>

一个澄清的例子：如果我将鼠标悬停在字母“N”上，就会出现一个图像。当我将鼠标悬停在字母“A”上时，会出现另一个图像，而从“N”出现的图像会消失。

标签： javascripthtmljquerycss

Answer 1

我对你想要的东西有点困惑。这可能是:not在 CSS 中使用会做你想做的事的情况。因此，如果我有几张图像并且只希望悬停的图像可见，我会添加

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>