建站常识

css鼠标经过文字时显示图片

发布时间 | 2016/12/7  点击 | 

html鼠标悬停在文字显示图片

.thumbnail{position: relative;z-index: 0;}
.thumbnail:hover{background-color: transparent;z-index: 50;}
.thumbnail span{ position: absolute;background-color: lightyellow;padding: 1px;left: -1000px;border: 1px dashed gray;
visibility: hidden;color: black;text-decoration: none;}
.thumbnail span img{border-width: 0;padding: 2px;}
.thumbnail:hover span{visibility: visible;top: 0;left: 55px; }

<a class="thumbnail" href=链接>文字在这
 <span><img src="图片地址" alt="图片在这" width="110" border="0"></span>
</a> 

相关信息