CODEWITHSUNDEEP
htmlcsshover
user2971812
user2971812

Reputation: 429

Showing div while hovering over image

I'm trying to enlarge an image when hovering over it as well as showing a div with text while hovering over that image. The enlarging works, but showing the other div doesn't.

<div id="punt1">
    <div id="puntnaam1" class="puntnaam">Ieplaan</div>
    <img class="punt"src="ieplaan1.jpg">
</div>

For CSS I used:

.punt{
    height: 100px;
    width: 100px;
}

.puntnaam{
    display: none;
}

.punt:hover{
    transform: scale(3);
}

.punt:hover .puntnaam{
    display: block;
}

What am I doing wrong?

Upvotes: 1

Views: 63

Answers (2)

NextGen123
NextGen123

Reputation: 293

You cant do something like that

.punt:hover .puntnaam{
    display: block;
}

its not working that way in CSS cause puntnaam is already hidden, You can use simple jQuery code to solve it

$(".punt").hover(function() {
$("#puntnaam1").show();
 });

Upvotes: 0

skyline3000
skyline3000

Reputation: 7913

You can't select previous siblings or parent elements in the DOM with CSS. You can only select next siblings or child elements.

e.g., if you changed your code to this:

<div id="punt1">
    <img class="punt"src="ieplaan1.jpg">
    <div id="puntnaam1" class="puntnaam">Ieplaan</div>
</div>

Then your selector could look like this:

.punt:hover + .puntnaam{
    display: block;
}

Because now the <div> is the next sibling after <img>

See: Is there a "previous sibling" CSS selector?

Upvotes: 6

Related Questions