Question

一开始，我想说抱歉，但我是新手。我正试图在THIS image

中实现类似的功能

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

我尝试将图像放在不同的块中，使其成为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/

.css背景图像出现在列表元素中

1 个答案: