javascript - 尝试让 div 在将鼠标悬停在图像上时出现......无法让它工作

Question

所以我试图让当我将鼠标悬停在图像上时出现一个文本框 div，但它似乎不起作用。 相关代码将放在下面，感谢大家的帮助!

 .prisoner-info-div{
        height:75px;
        width:500px;
        position:absolute;
    }
    #poison-ivy-info{
        top:450px;
        left:200px;
        visibility: hidden;
    }
    #joker-info{
        top:450px;
        left:200px;
        visibility: hidden;
    }
    #riddler-info{
        bottom:75px;
        left:200px;
        visibility: hidden;
    }
    #penguin-info{
        bottom:75px;
        left:200px;
        visibility: hidden;
    }
    #harley-quinn-info{
        bottom:75px;
        left:200px;
        visibility: hidden;
    }
    #poison-ivy-door:hover  #poison-ivy-info{
        visibility: visible;
    }
    #joker-door:hover  #joker-info{
        visibility: visible;
    }
    #riddler-door:hover  riddler-info{
        visibility: visible;
    }
    #penguin-door:hover  #penguin-info{
        visibility: visible;
    }
    #harley-quinn-door:hover  #harley-quinn-info{
        visibility: visible;
    }

<div class="prison" id="poison-ivy"> <img class="prisoners"src="images/poison-ivy.png" alt="poison-ivy"> <img class="door" id="poison-ivy-door"src="images/door.png" alt="prison-dppr"> </div>
        <div id="poison-ivy-info" class="prisoner-info-div">Poison Ivy is depicted as one of the world's most prominent eco-terrorists. She is obsessed with plants, botany, and environmentalism. She uses toxins from plants and her own bloodstream for her criminal activities</div>
        
        <div class="prison" id="joker"> <img class="prisoners"src="images/joker.png" alt="joker"> <img class="door" id="joker-door"src="images/door.png" alt="prison-door"> </div>
        <div id="joker-info" class="prisoner-info-div">The Joker is a master criminal with a clown-like appearance, and is considered one of the most infamous criminals within Gotham City.</div>
        
        <div class="prison" id="riddler"> <img class="prisoners"src="images/riddler.png" alt="riddler"> <img class="door" id="riddler-door"src="images/door.png" alt="prison-door"> </div>
        <div id="riddler-info" class="prisoner-info-div">The Riddler has an obsession with riddles, puzzles, and word games. The character frequently delights in over-stating his "intellectual superiority" and on forewarning both Batman and the police of his capers by sending them complex clues.</div>
        
        <div class="prison" id="penguin"> <img class="prisoners"src="images/penguin.png" alt="penguin"> <img class="door" id="penguin-door"src="images/door.png" alt="prison-door"> </div>
        <div id="penguin-info" class="prisoner-info-div">The Penguin is a Gotham City mobster who fancies himself a "gentleman of crime", often wearing a monocle, top hat, and tuxedo. The character is a short, obese man with a long nose, and he uses high-tech umbrellas as weapons.</div>
        
        <div class="prison" id="harley-quinn"> <img class="prisoners"src="images/harley-quinn.png" alt="hayley-quinn"> <img class="door" id="harley-quinn-door"src="images/door.png" alt="prison-door"> </div>
        <div id="harley-quinn-info" class="prisoner-info-div">Harley Quinn is a frequent accomplice and lover of the Joker, whom she met while working as an intern psychiatrist at Gotham City's Arkham Asylum, where the Joker was a patient.</div>

信息 div 是我将鼠标悬停在“门”上时尝试显示的内容。

Answer 1

在 CSS 中，您可以定位兄弟元素和子元素。这里的问题是您试图定位该上下文之外的元素。

您需要使用图像的父 DIV 作为可悬停的类，然后使用 + 定位您想要显示的同级 div .

.image-container:hover + .div-to-appear {

}