仅使用CSS在鼠标上方的另一链接图像上方显示图像

我希望image big.png显示在链接图像上方的

鼠标上方。
显示后，可以单击以发送到指定的链接

不需要javascript。只有CSS

我没有得到图像上方的
鼠标位置正确

<style>

.brands-listing{
    width:100%;
    padding:10%;
    list-style:none;
}

.brands-listing li{
    width:25%;
    display:inline;
    margin-right:50px;
}

div {
    display: none;

}

a:hover > div {
    display: block;
    position: relative;
    top:-100px;
}

</style>


.品牌上市{
宽度：100%；
填充：10%；
列表样式：无；
}
.李彦宏{
宽度：25%；
显示：内联；
右边距：50px；
}
div{
显示：无；
}
a:悬停>div{
显示：块；
位置：相对位置；
顶部：-100px；
}

HTML









u是否修复了：src=“big4.pngus中的双等式？使用一个标题来总结您的问题，而不是一般的“请帮助”，这样您就更有可能获得建设性的建议。
<ul class="brands-listing">
    <li>
        <a href="#">
          <img class="hover-image" alt="Flying Saucer" src="1.png" width="230" height="60">
          <div>
            <img alt="Flying Saucer" src="big1.png" width="280" height="120">
          </div>
        </a>
    </li>


    <li href="#">
        <a>
         <img class="hover-image" alt="Open House" src="2.jpg" width="230" height="60">
         <div>
          <img alt="Open House" src="big2.png" width="280" height="120">
         </div>
        </a>
    </li>

    <li>
        <a href="#">
          <img class="hover-image" alt="Flying Saucer" src="3.png" width="230" height="60">
           <div>
             <img alt="Flying Saucer" src="big3.png" width="280" height="120">
           </div>
        </a>
    </li>


    <li>
        <a href="#">
          <img class="hover-image" alt="Open House" src="4.png" width="230" height="60">
          <div>
            <img alt="Open House" src="big4.png" width="280" height="120">
          </div>
        </a>
    </li>

</ul>