简体   繁体   English

修改另一个元素的 CSS 悬停效果不起作用

[英]CSS hover effect to modify another element is not working

I am trying to get a <p> element to appear upon hovering over an image.我试图让<p>元素在悬停在图像上时出现。 As I have it, nothing happens when I hover over the image.正如我所拥有的,当我将鼠标悬停在图像上时没有任何反应。
Any idea what I'm doing wrong?知道我做错了什么吗?

 img { height: 400px; width: 400px; position: relative; } p { position: absolute; color: #b6a9a9; background-color: rgb(5, 5, 5); bottom: 50%; left: 1em; opacity: .68; transition: .5s ease-in; transform: scale(1); height: 25px; width: 25%; } img:hover .stuff p { transform: scale(2); transform-origin: center; }
 <img src="image.jpg"> <div class="stuff"> <p>here's some text that will go on top of ths image ... I hope...</p> </div>

You are almost there, you just need to add the + selector to the css definition你快到了,你只需要在css定义中添加+选择器

The + sign selector is used to select the elements that are placed immediately after the specified element but not inside. +号选择器用于选择紧跟在指定元素之后但不在里面的元素。

So: img:hover + .stuff p , means: when hover over img , select it's "brother" with class .stuff and then select the p that is inside.所以: img:hover + .stuff p ,意思是:当鼠标悬停在img ,选择它的“兄弟”类.stuff然后选择里面的p

 img { height: 400px; width: 400px; position: relative; } p { position: absolute; color: #b6a9a9; background-color: rgb(5, 5, 5); bottom: 50%; left: 1em; opacity: .68; transition: .5s ease-in; transform: scale(1); height: 25px; width: 25%; } img:hover + .stuff p { transform: scale(2); transform-origin: center; }
 <img src="https://via.placeholder.com/400"> <div class="stuff"> <p>here's some text that will go on top of ths image ... I hope...</p> </div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM