在使用wordpress在字母中進行懸停時顯示圖像字段

Question

我正在學習編碼的第一步。我在Codeacademy開了一些課程，現在我決定繼續從經驗中學習，同時建立一個WordPress的兒童主題。

事情是我正在製作一箇中間標題的主頁。這個想法是，如果你在信中懸停，你會看到一個圖像。所以像這樣可以在每個字母中看到不同的圖像懸停。

我做了如下代碼：

PHP：

<?php get_header(); ?> 

<div class="imghome imghome1"><?php the_field("image"); ?></div> 
<div class="imghome imghome2"><?php the_field("image_2"); ?></div> 
<div class="imghome imghome3"><?php the_field("image_3"); ?></div> 
<div class="imghome imghome4"><?php the_field("image_4"); ?></div> 
<div class="imghome imghome5"><?php the_field("image_5"); ?></div> 
<div class="imghome imghome6"><?php the_field("image_6"); ?></div> 
<div class="imghome imghome7"><?php the_field("image_7"); ?></div> 
<div class="imghome imghome8"><?php the_field("image_8"); ?></div> 
<div class="imghome imghome9"><?php the_field("image_9"); ?></div> 
<div class="imghome imghome10"><?php the_field("image_10"); ?></div> 

</div><!-- .content-area --> 


<div class="helloworld "> 
    <span class="word1" content="A">A</span> 
    <span class="word2" content="B">B</span> 
    <span class="word3" content="C">C</span> 
    <span class="word4" content="D">D</span> 
    <span class="word5" content="E">E</span> 
    <span class="namespace word6" content="F">F</span> 
    <span class="word7" content="G">G</span> 
    <span class="word8" content="H">H</span> 
    <span class="word9" content="I">I</span> 
    <span class="word10" content="I">I</span> 
    <span class="word11" content="J">J</span> 
</div> 

</div><!-- .content-area --> 

<?php get_footer(); ?> 

CSS：

.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; 
} 

在這個例子中我的想法是，如果你在與類的元素使懸停「字1 「將顯示類」imghome1「的圖像。但它不起作用。

我tryied這個太，但沒有成功：

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

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

你有沒有一些建議？

Answer 1

問題的原因在於CSS需要某種方式將一個元素的hover與另一個元素的樣式相關聯。這是可能的，但你需要改變你的html結構。三個選項：

• 重新排列的圖像，使它們各自的信件的子元素：

HTML：

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

注意使用<div>代替<span>自後者不能包含塊元素。

CSS：

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

• 重新排列的圖像，使它們鄰接時雙方各自的來信：

HTML：

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

CSS：

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

• 使用JavaScript

Answer 2

當然，你可以只用CSS和HTML做到這一點！ 你的問題是不正確的html結構和錯誤的CSS選擇器。 首先，你應該改變你的html結構。放置信件，而不是圖片等。然後將懸停事件添加到字母並使用「下一個元素選擇器」+。默認情況下，所有圖像都有opacity: 0;。但是，當你將字母不透明度更改懸停爲1.這就是全部。

.container { 
 
    position: relative; 
 
    width: 400px; 
 
    height: 200px; 
 
    background-color: black; 
 
} 
 

 
.word { 
 
    text-align: center; 
 
    
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
} 
 

 
.letter { 
 
    color: white; 
 
    font-size: 40px; 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
.letter:hover + .image { 
 
    opacity: 1; 
 
} 
 

 
.image { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    
 
    opacity: 0; 
 
    transition: .3s ease; 
 
} 
 

 
.image-r { 
 
    background-color: red; 
 
} 
 

 
.image-g { 
 
    background-color: green; 
 
} 
 

 
.image-b { 
 
    background-color: blue; 
 
}

<div class="container"> 
 
    <div class="word"> 
 
    <span class="letter">R</span> 
 
    <div class="image image-r"></div> 
 
    <span class="letter">G</span> 
 
    <div class="image image-g"></div> 
 
    <span class="letter">B</span> 
 
    <div class="image image-b"></div> 
 
    </div> 
 
</div>