ワードプレスを使用して文字をホバーしながら画像フィールドを表示

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構造を変更する必要があります。 3つのオプション：彼らはそれぞれの文字の子要素になるように

• は、画像を並べ替え：

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>