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");

    });

});

我使用这个来使图像变黑。我的代码可以运行，但不是很好。当鼠标悬停在盒子上时，图像被遮挡。如何实现文本在盒子上悬停后始终可见，无论鼠标指针在哪里？

对于这个问题中的错误，我感到抱歉，英语不是我的母语。

这是我在JS方面挣扎的图形展示 :)

- user3474160

---

你想在第一次悬停后永久更改文本吗？ - Taimour Tanveer

我只想在鼠标悬停在盒子上时显示和隐藏文本。因此，我使用了.toggle，它运行良好，但当我将鼠标指针放在文本上时，图像返回到非活动状态。 - user3474160

你在哪里应用了测试类来切换你的span悬停？ - Taimour Tanveer

哎呀，我没有复制那个。文本类在 kwadraty-post2 之前，所以看起来像这样： `<div class="test"><div class="kwadraty-post2">` 对不起。 - user3474160

这是我拥有的 - http://jsfiddle.net/6Z6Ev/5/ - user3474160

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/

- Taimour Tanveer

---

我试过了。这是jsfiddle链接 - http://jsfiddle.net/6Z6Ev/5/ 鼠标悬停在图片上，然后再悬停在span上，看看会发生什么。 - user3474160

请检查已编辑的答案并尝试使用fiddle。 - Taimour Tanveer

Answer 2

你好，如果我没记错的话。你的想法是：当你悬停在图片上时，应该显示 span（它是图片的兄弟元素）。如果你取消悬停，它仍然应该存在。

<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();
});

- Steven X

---

嗯...为了展示我所思考的内容，我可以向您展示一个类似于我的想法的链接[点击]（http://www.kominek.in/），除了这个框中的图像通常会更暗（就像在CSS中的background-color:#000和opacity:0.5一样），当鼠标悬停时将显示span文本（在CSS中默认显示:none），并且会变得更亮（就像在CSS中的opacity:1一样）。 - user3474160