1

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?

skyline3000
  • 7,639
  • 2
  • 24
  • 33
user2971812
  • 379
  • 2
  • 3
  • 9
  • Your code doesn't make sense. You are checking for hover over en element which has both the classes "punt" and "puntnaam" which doesn't exist. I would recommend using javascript for the desired effect and having a function that triggers on the "hover" event, that performs both tasks. – Wold Oct 27 '15 at 21:52

2 Answers2

6

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?

Community
  • 1
  • 1
skyline3000
  • 7,639
  • 2
  • 24
  • 33
0

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();
 });
NextGen123
  • 273
  • 1
  • 2
  • 12