Javascript 在整个galary上的鼠标将以html文本悬停

!！[在此处输入图像描述][1]我的图像库有问题，我想同时将四个图像悬停在其中一个图像上。我能做这项工作吗？我怎么做？请给我一个正确的答案

这是我的html代码

                <!--Page Navigation-->
                <!--Page Navigation End-->

            <div class="home-block" >

                <div class="one-third-thumbs clearfix" >
                    <figure>
                        <figcaption>
                            <strong>WEDDINGS</strong>                       
                            <a href="gallery-Weddigs.html" class="opener"></a>
                        </figcaption>

                        <a href="gallery-Weddigs.html"  class="thumb"><img src="img/dummies/featured-1.jpg" alt="Alt text" /></a>
                    </figure>

                    <figure>
                        <figcaption>
                            <strong>STUDIO</strong>                         
                            <a href="gallery-Studio.html" class="opener"></a>
                        </figcaption>

                        <a href="gallery-Studio.html"  class="thumb"><img src="img/dummies/featured-2.jpg" alt="Alt text" /></a>
                    </figure>



                    <figure>
                        <figcaption>
                            <strong>COMMERCIAL</strong>                         
                            <a href="gallery-Commercial.html" class="opener"></a>
                        </figcaption>

                        <a href="gallery-Commercial.html"  class="thumb"><img src="img/dummies/featured-5.jpg" alt="Alt text" /></a>
                    </figure>

                    <figure class="last">
                        <figcaption>
                            <strong>VIDEO</strong>                      
                            <a href="gallery-Video.html" class="opener"></a>
                        </figcaption>

                        <a href="gallery-Video.html"  class="thumb"><img src="img/dummies/featured-6.jpg" alt="Alt text" /></a>
                    </figure>


                </div>
            </div>

婚礼
工作室
商业
视频

请查看此演示

span.hover-txt{display:none；}
a:hover+span.hover-txt{display:block！important；}
你的文字在这里

在询问正确答案之前，请先给我们一个正确的问题：D您希望如何同时悬停多个元素？我有四个图像，并为每个图像添加了单独的链接。现在，如果我移动到图像上方，只需将该图像与文本同时悬停其中四个。对您来说，“悬停”是什么意思：是光标事件还是元素的视觉变化？您是如何实现它的：通过CSS还是Javascript？请提供相应的代码。给我javascript的任何答案。如果你希望有人为你做全部工作，我可以在私人消息中向你发送我的费率

<style>
span.hover-txt { display:none; }
a:hover+span.hover-txt { display:block!important; }
</style>

<a href="gallery-Weddigs.html"  class="thumb"><img src="img/dummies/featured-1.jpg" alt="Alt text" /></a>
<span class="hover-txt"> Your Text Here </span>