[英]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.