.css 悬停在列表元素中时显示背景图像

Question

开始，我想说声抱歉，但我是新手。我正在尝试实现 THIS 图片

中的效果

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

我试图将图像放在不同的块中，使其成为 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') 并在鼠标离开时将其删除。

当然你可以使用 css 只是悬停。

这是一个仅 css 的演示：http://jsfiddle.net/mirohristov/qvvycqb6/

.css 悬停在列表元素中时显示背景图像

.css Background image appear on hover in list element

html

javascript

css

jquery

background-image