Question

我尝试在图片上添加透明文字叠加层。我已经决定使用CSS添加透明div是最简单的，但无法弄清楚为什么我的代码不起作用。我在悬停时更改了图像的不透明度，并将包含文本的div设置为GameScene.swift。我使用visibility:hidden效果制作hover。我不能让它工作。请帮忙。这是小提琴：

https://jsfiddle.net/3Lx1pyL9/

这是html：

visibility:visible

和css：

<div id="chickcontainer">

        <img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>
        <img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750">
        <img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzRJV4iLzYh0eqyVG9-OidAW1t24Xa_vmVRX4Qy-WoyMIgpCx6">
    </div>

Answer 1

问题是你的选择器：

#chickcontainer img:hover .overlay

此选择器要求.overlay是img:hover的后代，图像根本不能有后代。在你的html中，.overlay是一个兄弟，它将下一个放在图片上。

<img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>

相反，你应该使用＆＃34;下一个兄弟＆＃34; +选择器选择下一个元素并将样式应用于它。

#chickcontainer img:hover + .overlay

这是一个有效的例子

＆＃13;

#chickcontainer img{
    position:relative;
    width:30%;
    height:30%;
    display:inline-block;
    margin-left:2%;
    border-radius:100%;
    border: solid .5px;

}

.overlay{
    visibility:hidden;
    position:absolute;
    width:20%;
    height:90%;
    top:12%;
    left:7%;
    z-index:0;
}

#chickcontainer img:hover + .overlay{
    visibility:visible;
    z-index:100;
}

＆＃13;

<div id="chickcontainer">
    <img src="http://animal-dream.com/data_images/chicken/chicken7.jpg"><div class="overlay">chicks</div>
    <img class="chicks" src="https://smittenkitchendotcom.files.wordpress.com/2016/09/piri-piri-chicken.jpg?w=750">
    <img class="chicks" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRzRJV4iLzYh0eqyVG9-OidAW1t24Xa_vmVRX4Qy-WoyMIgpCx6">
</div>

＆＃13;

Answer 2

mkdir one touch one/x.h chmod -r one ls one // fails! cat one/x.h // works!容器必须是悬停元素的子元素。

我更新了小提琴，所以它有效。不好，但机制应该清楚。

https://jsfiddle.net/3Lx1pyL9/4/

Answer 3

作为＆lt; img＆gt;不是对标签，因此您不能在其中放置任何元素。

更改

#chickcontainer img:hover .overlay

到

#chickcontainer img:hover + .overlay

元素+元素选择器用于选择紧跟在第一个指定元素之后（而不是在其中）的元素。

参考：CSS element+element Selector

将鼠标悬停在照片上不会添加透明div

3 个答案: