我想制作4个带有背景图像的框,在鼠标悬停时淡入并显示一些文本。图像将是不同的,并且将来自于文章缩略图。框将成为文章的超链接。在PHP中,我有以下代码:
<div class="kwadraty-post2">
<?php
$kwadrat1 = get_theme_mod('box1');
$postid = url_to_postid( $kwadrat1 );
?>
<a href="<?php echo $kwadrat1 ?>">
<?php echo get_the_post_thumbnail( $postid ); ?>
<span><?php echo get_theme_mod('box1_title');?></span>
</a>
</div>
我有一个JS脚本
$(document).ready(function () {
$(".kwadraty-post2").MyFadeOverImage({
normalAlpha: 0.5,
hoverAlpha: 1,
normalToneColor: "#000",
imageWidth: 'auto',
imageHeight: '100%'
});
$(".test").hover(function () {
$(".kwadraty-post2 span").toggle("slow");
});
});
我使用这个来使图像变黑。我的代码可以运行,但不是很好。当鼠标悬停在盒子上时,图像被遮挡。如何实现文本在盒子上悬停后始终可见,无论鼠标指针在哪里?
对于这个问题中的错误,我感到抱歉,英语不是我的母语。