Попытка сделать div появляется при наведении курсора на изображение .. не может заставить его работать - PullRequest
Новая
       15

Попытка сделать div появляется при наведении курсора на изображение .. не может заставить его работать

1 голос
/ 10 октября 2019

Итак, я пытаюсь заставить 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>

Информационные элементы - это то, что я пытаюсь создать, когда парю над «дверями».

Ответы [ 2 ]

0 голосов
/ 10 октября 2019

Пожалуйста, запишите этот код для целевого текста div при наведении изображения 

.prison:hover + .prisoner-info-div{visibility: visible;}
0 голосов
/ 10 октября 2019

В CSS вы можете настроить таргетинг элементов и дочерних элементов. Проблема здесь в том, что вы пытаетесь нацелить элемент, находящийся за пределами этого контекста.

Вам нужно будет использовать родительский DIV изображения в качестве hover способного класса, а затем использовать +нацелить на родного div, которого вы хотели бы видеть. 

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

}
...