Question

我有一个div

<div id="box">
content content
content content <a href="#">content</a>content
</div>

鼠标悬停在链接上我想要更改链接的颜色以及div的背景颜色。仅使用css，是否只能使用css？请帮帮我。

Answer 1

目标parent元素没有CSS选择器。但用一些技巧可以达到欲望的效果。写得像这样：

#box a:hover:after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:red;
    z-index:-1;
}

选中此http://jsfiddle.net/V4qDm/3/

Answer 2

这是工作小提琴：

http://jsfiddle.net/V4qDm/2/

添加此CSS

#box.hover{background:#cb2326;}
#box a{display:inline-block;}
#box a:hover{color:#fff;}

添加此Jquery：

$('a').hover(function(){
    $(this).parent().toggleClass('hover');
});

Answer 3

您可以使用

更改链接颜色

   a:hover{color:#ccc;}

但您无法使用css3或css 2访问子元素。

在css4中提供了$ sign

$div>a:hover{background:#ccc;}

但目前没有浏览器支持

您必须查看javascript以更改父级背景。

Answer 4

你可以在div上使用:hover，除IE6之外的所有浏览器都支持它，IE6今天的用户非常少：

div#box:hover {
background-color: #whatever;
}

编辑：当然，我完全误解了这个问题。道歉！正如其他人指出的那样，子元素不可能在CSS中改变其父元素的外观（好吧，至少在CSS4之前）。如果父母可以作为触发器接受，那么上述工作就可以了，你当然可以同时改变链接的外观：

div#box:hover a {
color: #somecolour;
}

*）根据statcounter.com

的0.66％

Answer 5

你应该考虑使用javascript，它可以完成简单的任务，就像它们一样;简单！

在标题中添加以下内容：

<script type="text/javascript">
    function changeDivAndLink(linkid, divid){
        document.getElementById(linkid).setColor(...);
        document.getElementById(divid).setBackground(...);
    }
</script>

然后，您需要对代码执行的操作是添加onmouseover：

<div id="box">
    content content
    content content <a href="#">content</a>content
</div>

我知道你真的想在不使用脚本的情况下这样做，但是现在javascript得到了广泛的支持，不支持它的浏览器的百分比可以忽略不计。

希望这对一些人有所帮助。

Answer 6

要使整个div充当链接，请将锚标记设置为：display: block; 然后将锚标记的高度设置为100％。将div标签高度设置为固定大小。

示例：

    <html>
<head>
        <title>sample link</title>

        <style type="text/css">
        .container {
                border: 1px solid #C9F;
                width: 50%;
                height: 20px;
        }

        .container a {
                display: block;
                background: #FC6;
                height: 100%;
                text-align: center;
        }

        .container a:hover {
                background: #996699;
                color:#FFF;
        }

        </style>

</head>
<body>

        <div class="container">
                <a href="http://www.stackoverflow.com">Stack Overflow</a>
        </div>


</body>
 </html>

鼠标悬停在链接上我想改变div和链接的背景颜色

6 个答案: