可以使用图元上的属性。看看下面的概念,看看您是否可以使用它。
基本上,您可以隐藏所有“特色”图像向要用于显示/隐藏图像的帖子标题添加常规类向包含要显示的图像id的post title元素添加属性生成的标记:
<img src="http://location/to/image.png" id="attachement-id-1" class="hide-it">
<a href="http://path/to/post">
<h3 class="hover-show-attachment" hover-data="attachement-id-1">The Post Title 1</h3>
</a>
<img src="http://location/to/image.png" id="attachement-id-2" class="hide-it">
<a href="http://path/to/post">
<h3 class="hover-show-attachment" hover-data="attachement-id-2">The Post Title 2</h3>
</a>
<script type="text/javascript">
( function( $ ) {
$( \'.hover-show-attachment\' ).on( {
mouseenter : function(){
var attachment = $( this ).attr( \'hover-data\' );
$( \'#\' + attachment ).show();
},
mouseleave : function() {
var attachment = $( this ).attr( \'hover-data\' );
$( \'#\' + attachment ).hide();
}
} );
} )( jQuery || {} );
</script>
或者,您可以使用
hover-data
属性保留图像的路径/url,悬停时创建并显示新的图像元素,退出时将隐藏/删除图像。