更改背景颜色并在悬停后保留父图像

Question

我想更改背景颜色（从＃333333到＃292929）并在我的列表项上悬停事件后保留父图像，我的问题是颜色不会改变它仍然像以前一样

这是我的代码：

问题的一部分：

  .footer li a:hover {
    border-bottom: 1px solid #484848;
    border-top: 1px solid #191919;
    height: 30px;
    line-height: 30px;
    border-left: none;
    border-right: none;
    display: block;
    background: #292929 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
    overflow:hidden;
    width: 100%
}

所有css代码

   .footer {
    background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
    height: 318px;
}

.footer_container {
    width: 960px;
    height: 318px;
    margin: 0 auto;
}

.footer h1 {
    font-size: 18px;
    font-family: Kozuka Gothic Pro;
    padding-top: 46px;
    color: #FFF;
}

ul.ul_links {
    width: 225px;
    height: 237px;
    margin-top: 19px;
}

ul.ul_links a {
    color: #cccccc;
    text-decoration: none;
    font-size: 13px;
    line-height: 31px;
}

ul.ul_links a::before {
    content: url(http://s3.postimg.org/7bb9a1m4v/links.png);
    padding-right: 11px;
    padding-left: 8px;
}

.footer li a:hover {
    border-bottom: 1px solid #484848;
    border-top: 1px solid #191919;
    height: 30px;
    line-height: 30px;
    border-left: none;
    border-right: none;
    display: block;
    background: #292929 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg);
    overflow:hidden;
    width: 100%
}

jsfiddle

预期结果：

Answer 1

你好TH3 AWAK3NING，你需要做的只是改变背景的不透明度

jsFiddle：https://jsfiddle.net/py3uwpxn/11/

HTML

$(element).unbind('click', function(){});
$(element).bind('click', function(){});

CSS

<div class="footer">
<div class="footer_container">
<div class="Links">
<ul class="ul_links">
<li ><a href="">www.example.com</a></li>
<li ><a href="">www.1stwebdesigner.com</a></li>
<li ><a href="">www.labzip.com</a></li>
<li ><a href="">www.labzip.com</a></li>
<li ><a href="">www.samplelink.com</a></li>
<li ><a href="">www.outgoinglink.com</a></li>
<li ><a href="">www.link.com</a></li>
</ul>
</div>
</div>
</div>

使用.footer { background: #333333 url(http://s10.postimg.org/yejg5cted/widget_bg.jpg); height: 318px; } .footer_container { width: 960px; height: 318px; margin: 0 auto; } .footer h1 { font-size: 18px; font-family: Kozuka Gothic Pro; padding-top: 46px; color: #FFF; } ul.ul_links { width: 225px; height: 237px; margin-top: 19px; } ul.ul_links a { color: #cccccc; text-decoration: none; font-size: 13px; line-height: 31px; } ul.ul_links a::before { content: url(http://s3.postimg.org/7bb9a1m4v/links.png); padding-right: 11px; padding-left: 8px; } .footer li a:hover { border-bottom: 1px solid #484848; border-top: 1px solid #191919; height: 30px; line-height: 30px; border-left: none; border-right: none; display: block; background: rgba(0,0,0,.1); overflow:hidden; width: 100% } 它还允许你着色div的颜色，看起来你已经改变了背景的颜色：）

Answer 2

这是不可能的，因为实际图像是定义原始颜色的。在这种情况下你需要做的是创建具有透明背景的图像（因此它只有网格点）然后你就可以改变它背后的背景颜色并看到你想要的效果。

获得新图像后，请设置以下属性：

key

Here is an example只需要添加新的透明图像

Answer 3

只需从.footer li a:hover中删除背景图片网址即可。

.footer li a:hover {
    border-bottom: 1px solid #484848;
    border-top: 1px solid #191919;
    height: 30px;
    line-height: 30px;
    border-left: none;
    border-right: none;
    display: block;
    background-color: rgba(0,0,0,0.2); //Updated
    overflow:hidden;
    width: 100%
}