.css背景圖像出現在列表元素中的懸停上

Question

首先，我想對不起，但這是我的新手。 我正在嘗試實現此圖像中的類似內容

我已經有一個腳本設置，可以使塊在懸停時增長，但是在顯示背景圖像方面存在很大的問題（我想只是為了開始，使其顯示。然后我將使用jQuery動畫）。 所以我的問題是：將背景附加到il塊，並使其僅在懸停時顯示（正確縮放c），什么是最好的方法？

我試圖將圖像放置在另一個塊中，使其定位。 絕對的，但是它將被一個以上的要素弄得一團糟。

這是列表的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為偽元素設置動畫，然后在mouseover上添加.addClass('active')並在mouseleave上將其刪除。

當然，您只能將css用於懸停。

這是一個僅CSS的演示： http : //jsfiddle.net/mirohristov/qvvycqb6/