在图像上悬停时显示div

我试图放大图像并将其悬停在图像上方时显示一个div，同时将鼠标悬停在该图像上。扩大的作品，但显示其他股利没有。在图像上悬停时显示div

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

对于CSS我用：

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

.puntnaam{ 
    display: none; 
} 

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

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

我在做什么错？

来源

2015-10-27 user2971812

您的代码没有意义。您正在检查将鼠标悬停在en元素上，该元素既包含“punt”也包含不存在的“puntnaam”类。我会推荐使用javascript来获得所需的效果，并且在“悬停”事件上触发一个可执行这两项任务的函数。 – Wold

您不能使用CSS在DOM中选择以前的兄弟或父元素。您只能选择下一个兄弟或子元素。

例如，如果你改变了你的代码，以这样的：

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

那么你的选择看起来是这样的：

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

因为现在<div>是<img>

后的下一个兄弟参见：Is there a "previous sibling" CSS selector?

来源

2015-10-27 21:56:37 skyline3000

因为skyline3000正在输入这个我为你创建这个https://jsfiddle.net/399j5e03/这是完全相同的说明... –

感谢你们俩！ – user2971812

你不能做这样的事情

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

它不工作在CSS原因puntnaam这种方式已经隐藏，您可以使用简单的jQuery代码来解决它

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

来源

2015-10-27 21:56:41

在图像上悬停时显示div

回答

相关问题