There are a lot of pictures with a single crypt_img class, with a hover for which you need to show the corresponding block with the crypt_text class, which are also several, how is this implemented in js? Saw a couple of times that with the help val (), eq () and attr (), but very little knowledge to implement it and write the code
|
1 answer
Do you really need to use JS, or maybe just use CSS? It is possible in more detail where the text block should be displayed.
.photo { display: inline-block; /* Π‘ΡΡΠΎΡΠ½ΠΎ-Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ */ position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */ } .photo:hover::after { content: attr(data-title); /* ΠΡΠ²ΠΎΠ΄ΠΈΠΌ ΡΠ΅ΠΊΡΡ */ position: absolute; /* ΠΠ±ΡΠΎΠ»ΡΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */ left: 20%; top: 30%; /* ΠΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ */ z-index: 1; /* ΠΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΡ ΠΏΠΎΠ²Π΅ΡΡ
Π΄ΡΡΠ³ΠΈΡ
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² */ background: rgba(255,255,230,0.9); /* ΠΠΎΠ»ΡΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΉ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° */ font-family: Arial, sans-serif; /* ΠΠ°ΡΠ½ΠΈΡΡΡΠ° ΡΡΠΈΡΡΠ° */ font-size: 11px; /* Π Π°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ */ padding: 5px 10px; /* ΠΠΎΠ»Ρ */ border: 1px solid #333; /* ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΠ°ΠΌΠΊΠΈ */ } <div class="photo" data-title="ΠΡΠΎ Apple!"><img src="https://infoday.site/wp-content/uploads/2018/05/apple-03.jpg" alt=""></div> 
Lukas lukas
818 one 2 7
- prnt.sc/k9xwj6 - Dmitry Noskov
- Here you need when you hover on the appropriate cryptocurrency, so that the corresponding caption climbs, cryptocurrency images have the same class crypt_img, tooltips have crypt_text - Dmitry Noskov
- And that version with CSS that I wrote above does not suit you? Should I use JS? - Lukas
|