时间戳

首页 > 解决方案 > 将鼠标悬停在图像上时尝试显示 div .. 无法使其工作

javascript - 将鼠标悬停在图像上时尝试显示 div .. 无法使其工作

问题描述

所以当我将鼠标悬停在图像上时，我试图让一个文本框 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 是我试图在悬停在“门”上时出现的内容。

标签： javascripthtmlanimationhover

解决方案

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

您需要使用图像的父 DIV 作为hover能够类，然后使用 a+来定位您希望出现的兄弟 div。

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

}

推荐阅读