jQuery - 悬停时淡化图像和文本

Question

我想在悬停时在背景上制作 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 来遮蔽图像。这是我所做的工作，但不正确。悬停后是图像黑屏。无论鼠标光标在哪里，如何让文本在框上悬停后可见？

对于这个问题的错误，我深表歉意，英语不是我的主要语言。

This is graphical presentation of my struggle with JS :)

Answer 1

你试过用这个吗

$(".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;
}

小提琴：http://jsfiddle.net/6Z6Ev/25/

Answer 2

Dzien dobry，如果我是对的。你的想法是：当你悬停图像时，应该显示跨度（这是图像的兄弟）。如果您取消悬停，它应该仍然存在。

<a href="#">
   <img class="my-img" src="" />
   <span class="span-text">text</span>
</a>

如果您的代码看起来像这样，您可以在您的 css 中隐藏默认跨度，并在 $(document).ready() 函数内的 jQuery 中尝试类似的操作

$('.my-img').hover(function() {
   $(this).siblings('.span-text').show();
});