Php 使用wordpress以字母悬停时显示图像字段

我正在迈出学习编码的第一步。我在Codeacademy上了一些课程，现在我决定在构建wordpress儿童主题的同时继续从中学习

问题是我正在制作一个标题在中间的主页。这个想法是，如果你把鼠标悬停在一个字母上，你会看到一个图像。所以像这样，可以看到不同的图像在每个字母中悬停

我编写了以下代码：

PHP:

在本例中，我的想法是，如果将鼠标悬停在类为“word1”的元素中，则会显示类为“imghome1”的图像。但它不起作用

我也试过，但没有成功：

div .word1:hover div .imghome1 {
display: block;
cursor: pointer;
}

div .helloworld span .word1:hover .imghome1 {
display: block;
cursor: pointer;
}

---

您有什么建议吗？

问题的原因在于CSS需要某种方式将一个元素的

悬停

与另一个元素的样式关联起来。这是可能的，但您需要更改html结构。三种选择：

• 重新排列图像，使其成为各自字母的子元素：

HTML:

• 重新排列图像，使其与各自的字母相邻：

HTML:

• 使用JavaScript

---

当然，您可以只使用css和html来完成！ 您的问题是错误的html结构和错误的css选择器。 首先，您应该更改html的结构。放置字母，而不是图像等。然后将悬停事件添加到字母中，并使用“下一个元素选择器”

+

。默认情况下，所有图像都具有

不透明度：0。但当您悬停时，字母不透明度将更改为1。就这些


.container{
位置：相对位置；
宽度：400px；
高度：200px；
背景色：黑色；
}
.字{
文本对齐：居中；
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
}
.信{
颜色：白色；
字体大小：40px；
字体系列：无衬线；
字体大小：粗体；
z指数：1；
位置：相对位置；
}
.字母：悬停+.图像{
不透明度：1；
}
.形象{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
不透明度：0；
过渡：放松；
}
.image-r{
背景色：红色；
}
.image-g{
背景颜色：绿色；
}
.image-b{
背景颜色：蓝色；
}

R
G
B
什么不起作用？如果我将鼠标悬停在.word1中。imghome1不会显示。这是我在这个代码div.helloworld span.word1:hover.imghome1{display:block；cursor:pointer；}Try.helloworld:hover{display:none；}中犯的错误。如果有隐藏的内容，则无法将其悬停。尝试不透明度：0隐藏和类似img:hover{opacity:1；}谢谢你的回答Jonas，但我的想法是悬停一个已经显示的单词，当我悬停它时，我可以显示一个图像。所以有必要隐藏图像，只有在我停留在一个词中时才显示它们。非常感谢巴特。现在我明白了，你不用js也能做到。
.helloworld {
font-family: pcablack;
font-size: 21px;
word-spacing: -16px;
text-align: center;
margin-top: 40vh;
position: inherit;
z-index: 10000;
}

.namespace {
margin-left: 12px;
}

.imghome1 {
display: none;
}

.imghome2 {
display: none;
}

.imghome3 {
display: none;
}

.imghome4 {
display: none;
}

.imghome5 {
display: none;
}

.imghome6 {
display: none;
}

.imghome7 {
display: none;
}

.imghome8 {
display: none;
}

.imghome9 {
display: none;
}

.imghome10 {
display: none;
}

.word1:hover .imghome1 {
display: block;
cursor: pointer;
}

div .word1:hover div .imghome1 {
display: block;
cursor: pointer;
}

div .helloworld span .word1:hover .imghome1 {
display: block;
cursor: pointer;
}

<div class="word1" content="A">A<div class="imghome imghome1"><?php the_field("image"); ?></div></div>

.word1:hover > .imghome1 {
    display: block;
}

<span class="word1" content="A">A</span><div class="imghome imghome1"><?php the_field("image"); ?></div>

.word1:hover + .imghome1 {
    display: block;
}