：仅当在开发工具检查器中强制执行时，悬停才有效
：仅当在开发工具检查器中强制执行时，悬停才有效
提问于 2020-05-27 04:31:12
:hover效果仅在通过dev工具强制使用时有效，但在鼠标悬停时无效。我试着把浏览器从mozilla，chrome换成safari，但是没有成功，为什么会这样？我想要文本(mary...)只要我一悬停就会出现在图像上。
这是我的代码，
.story {
width: 75%;
color: $color-black;
margin: 0 auto;
background-color: $color-white;
border-radius: 3px;
padding: 9rem 6rem;
padding-left: 9rem;
font-size: $default-font-size;
transform: skewX(-12deg);
& > * {
transform: skewX(12deg);
}
&__shape {
width: 17rem;
height: 17rem;
float: left;
-webkit-shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-3rem) skewX(12deg);
position: relative;
}
&__img {
height: 100%;
transform: translateX(-4rem) scale(1.4);
backface-visibility: hidden;
transition: all .5s;
}
&__caption {
text-transform: uppercase;
font-size: 1.7rem;
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, 30%);
transition: all .4s;
color: $color-white;
opacity: 0;
&:hover {
opacity: 1;
transform: translate(-50%, -50%);
}
} <div class="story">
<figure class="story__shape">
<img src="/img/nat-8.jpg" alt="Blonde" class="story__img">
<figcaption class="story__caption">mary smith</figcaption>
</figure>
</div>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-27 04:50:45
如果你想在将鼠标悬停在图片上时显示标题，那么应用:hover to &__shape怎么样？
https://codepen.io/kreediam/pen/pojmEwJ
&__shape {
width: 17rem;
height: 17rem;
float: left;
-webkit-shape-outside: circle(50% at 50% 50%);
shape-outside: circle(50% at 50% 50%);
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
transform: translateX(-3rem) skewX(12deg);
position: relative;
&:hover {
.story__caption {
opacity: 1;
transform: translate(-50%, -50%);
}
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62030912
复制相关文章
相似问题
腾讯云开发者
