尝试在将鼠标悬停在图像上时显示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 able类，然后使用+来定位您想要显示的兄弟hover。

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

}

Answer 2

请为悬停图像上的目标文本div写下此代码

.prison:hover + .prisoner-info-div{visibility: visible;}