Question

我正在尝试使用css来改变div的背景图像和文本的颜色，当悬停包含文本和背景图像的div时...它可以工作但有一些问题......

当悬停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

您的问题很简单 - 删除:hover

之前的空格

#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}

请在此处查看更新的小提琴：http://jsfiddle.net/7SJbx/

选择器中的空格意味着您将转到子元素。所以你为孩子宣布了悬停效果，而不是fancy_hover - 对象。

Answer 2

你有

#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;
}

悬停在div更改文本和背景图像上

2 个答案: