我想在悬停时使背景上有图像的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");
});
});
我用THIS来遮光图像。这是我所做的,但不正确。悬停后是图像的遮光。无论鼠标光标在哪里,我如何使文本在悬停在框上后都可见?
我对这个问题的错误感到抱歉,英语不是我的主要语言。
这是我与JS斗争的图形演示:)
你试过使用这个吗
$(".kwadraty-post2").hover(function () {
$(".kwadraty-post2 span").toggle("slow");
});
而不是这个
$(".test").hover(function () {
$(".kwadraty-post2 span").toggle("slow");
});
编辑:你可以添加一个覆盖,然后使用这个css进行褪色:
.overlay{
z-index:10;
width:300px;
height:100%;
top:0;
left:0;
position:absolute;
background-color:black;
opacity:0.5;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
.overlay:hover{
opacity:0;
}
Fiddle:http://jsfiddle.net/6Z6Ev/25/
<a href="#">
<img class="my-img" src="" />
<span class="span-text">text</span>
</a>
如果你的代码看起来像这样,你可以在css中默认隐藏span,并在$(document).ready()函数中的jQuery中尝试这样的操作
$('.my-img').hover(function() {
$(this).siblings('.span-text').show();
});