css鼠标实现悬浮显示和隐藏

想要实现一个这样的效果，当鼠标悬浮在右边图片的时候展示出别的内容，贴出代码：
思路是：有A和B两个元素，需要B实现这样的效果，首先写好B元素的样式，给B添加一个opacity这样的属性进行隐藏，利用hover功能控制B元素的显示，改变opacity的值。

<a  href="https://cf.qq.com/cp/a20220218newlimit/pc
                /neipei.html?ADTAG=media.o2qqfree.topbanner.
                topbannerbigpic.o2-107063.0.348764&ad_id=58777&mtr_id=348764" target="_blank"
                class="div2_right">
                    <div class="div2_right_hover">
                        <a target="_blank" 
                        href="https://cf.qq.com/cp/a20220218newlimit/pc/neipei.html?
                        ADTAG=media.o2qqfree.topbanner.topbannerbigpic.o2-107063.0.348764&ad_id=58777&mtr_id=348764" >
                        </a>
                    </div>
                </a>

.div2_right {
                width:300px;
                height:100%;
                background-image: url("../../img/logo2.jpg");
                background-repeat: no-repeat;
                background-position: center;
                .div2_right_hover {
                    // display:none;
                    opacity: 0;
                    width: 970px;
                    height:185px;
                    background-image: url("../../img/logo3.png");
                    background-repeat: no-repeat;
                    transition:opacity 2s;
                }
            }
            .div2_right:hover .div2_right_hover {
                // display: block;
                opacity: 1;
            }

关于hover的使用更详细的用法参考文章：https://www.cnblogs.com/engeng/p/7429095.html