javascript - .css 背景图像出现在悬停在列表元素中

Question

开始，我想说声抱歉，但我是新手。我正在努力实现类似 THIS 的目标图片

我已经有一个脚本设置来使 block 在悬停时增长，但是在显示背景图像方面有一个大问题(我想要，只是为了开始，让它显示。然后我将玩 jQuery 动画).所以我的问题是:将背景附加到 il block 并使其仅在悬停时出现(适当缩放 ofc)的最佳方法是什么？

我试图将图像放在不同的 block 中，使其成为 pos。绝对的，但它会被不止一个元素弄乱。

这是列表的 html 代码:

<ul id="AktContainer">
           <li class="Akt">President killed a baby!
        </li>

           <li class="Akt">President killed a baby!</li>
           <li class="Akt">President killed a baby!</li>
           <li class="Akt">President killed a baby!</li>
           <li class="Akt">President killed a baby!</li>

    </ul> <!--AktContainer -->

以及内部元素的 css:

#AktContainer{
display:block;
width: 95%;
float:right;
height: 88%;
}

.Akt{
display: block;
width: 330px;
height: 12%;
background-color:  rgba(0, 0, 0, 0.1);
}

还有，缩放单个 il 元素的脚本:

$('.Akt')
.on('mouseover', function(){
    var div = $(this);
    div.stop(true, true).animate({ 
        margin: -10,
        width: "+=20",
        height: "+=20",


    }, 'fast');
})
.on('mouseleave', function(){
    var div = $(this);
    div.stop(true, true).animate({ 
        margin: 0,
        width: "-=20",
        height: "-=20",


    }, 'fast');
})

Answer 1

您不能淡化背景图像并只保留文本与一个元素。您可以使用伪元素(:before 和 :after)并为其设置动画，但这些伪元素无法通过 jQuery 访问。

因此，最好的选择是使用 2 个元素或使用 css 为伪元素设置动画，然后仅在鼠标悬停时 .addClass('active') 并在 mouseleave 时将其删除。

当然，您可以仅将 css 用于悬停。

这是一个纯 CSS 演示:http://jsfiddle.net/mirohristov/qvvycqb6/