Valentin Verdegales Valentin Verdegales - 4 months ago 12
HTML Question

Show image fields while doing hover in letters using wordpress

I am making my first steps learning to code. I made some courses in Codeacademy and now I decided to continue learning from the experience while I build a wordpress child theme.

The thing is that I am making a home page with the title in the middle. The idea is that if you make hover in a letter you will see an image. So like this it's possible to see a different image making hover in each letter.

I made the following code:

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


In this example my idea is if you make hover in the element with the class "word1" the image with the class "imghome1" would be displayed. But it doesn't work.

I tryied this too, but without success:

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

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


Do you have some suggestion?

Answer

The cause of your problem lies in the fact that CSS needs some way to relate one element's hover to another element's styling. This is possible, but you'll need to change your html structure. Three options:

  • Rearrange the images so that they are a child element of their respective letters:

HTML:

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

Note the use of <div> instead of <span> since the latter cannot contain block elements.

CSS:

.word1:hover > .imghome1 {
    display: block;
}
  • Rearrange the images so that they are adjacent to their respective letters:

HTML:

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

CSS:

.word1:hover + .imghome1 {
    display: block;
}
  • Use JavaScript