Zeigen Sie Bildfelder, während Sie in Buchstaben mit Hilfe von WordPress schweben

Question

Ich mache meine ersten Schritte lernen zu programmieren. Ich habe einige Kurse in der Codeacademy gemacht und jetzt habe ich beschlossen, weiterhin von den Erfahrungen zu lernen, während ich ein Wordpress-Kinderthema erstelle.

Die Sache ist, dass ich eine Homepage mit dem Titel in der Mitte mache. Die Idee ist, dass Sie ein Bild sehen, wenn Sie in einem Buchstaben schweben. So ist es möglich, ein anderes Bild zu sehen, das in jedem Buchstaben schwebt.

Ich habe den folgenden 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 diesem Beispiel meine Idee ist, wenn Sie schweben in das Element mit der Klasse „word1 machen "Das Bild mit der Klasse" imghome1 "würde angezeigt werden. Aber es funktioniert nicht.

tryied ich das auch, aber ohne Erfolg:

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

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

Haben Sie einen Vorschlag?

Answer 1

Die Ursache für Ihr Problem liegt in der Tatsache, dass CSS eine Möglichkeit braucht, um das Element eines Elements mit dem Styling eines anderen Elements in Beziehung zu setzen. Dies ist möglich, aber Sie müssen Ihre HTML-Struktur ändern. Drei Optionen:

• die Bilder neu anordnen, so dass sie ein untergeordnetes Element ihrer jeweiligen Buchstaben sind:

HTML:

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

Beachten Sie die Verwendung von <div> statt <span> seit Letzteres darf keine Blockelemente enthalten.

CSS:

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

• die Bilder neu anordnen, so dass sie zu ihren jeweiligen Buchstaben angrenzen:

HTML:

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

CSS:

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

• verwenden JavaScript

Answer 2

Natürlich können Sie es tun, nur CSS und HTML verwenden! Ihre Probleme sind falsche HTML-Struktur und falsche CSS-Selektoren. Zuerst sollten Sie die Struktur Ihres HTML ändern. Platziere Buchstaben, dann Bild und so weiter. Fügen Sie dann dem Buchstaben ein Hover-Ereignis hinzu und verwenden Sie "next element selector" +.Standardmäßig haben alle Bilder opacity: 0;. Aber wenn Sie schweben, ändert sich die Deckkraft des Buchstabens auf 1. Das ist alles.

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