jquery - 将鼠标悬停在更改文本和背景图像的 div 上

Question

当鼠标悬停包含文本和背景图像的 div 时，我正在尝试使用 css 更改 div 的背景图像和 at 文本的颜色......它有效但有一些问题......

当悬停 div #fancy_hover 时，背景图像发生变化，文本颜色和装饰同时发生......但是当将文本 div 链接悬停在里面时我遇到了问题，我的文本 div 的背景颜色消失了，它应该保持白色......当悬停文本本身时，我的文本背景变为灰色......

有人可以帮忙吗？

非常感谢!

这是html

<a href="http://rockonbones.com/news">
<div id="fancy_hover">
    <div class="damier_menu">
        <div class="texte">
            <span class="news">news</span>
        </div>
    </div>
</div>
</a>

和CSS:

.damier_menu{
    width: 100%;
    height: 100%;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px ;
    -webkit-border-radius: 10px ;
    }
#fancy_hover .texte{
    margin-top: 20px;
    background-color: white!important;
    padding: 5px 0 5px 0;}

#fancy_hover{
    width: 140px;
    height: 105px;
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px ;
    -webkit-border-radius: 10px ;
    color: black ;
    background-image: url('http://rockonbones.com/wp-content/uploads/fond_large.png');
    background-size: cover;
    background-repeat: no-repeat;}

#fancy_hover :hover{
    color:#c33!important;
    text-decoration: line-through!important;
    background-image: url('http://rockonbones.com/wp-content/uploads/fond_anim_2.gif')!important;
    background-size: cover;
    background-repeat: no-repeat}

这是jsfiddle

http://jsfiddle.net/3gGY3/1/

非常感谢

Answer 1

你有

#fancy_hover :hover { .. }

你是说

#fancy_hover:hover { .. }

http://jsfiddle.net/3gGY3/3/

如果您在 :hover 之前放置空格，那么它将以 fancy_hover 内所有元素的悬停状态为目标。这就是为什么您将鼠标悬停在文本上时会看到背景的原因

对于通过 http://jsfiddle.net/3gGY3/6/ 的线路

#fancy_hover .news:hover{
    text-decoration: line-through;
}