2

我有一个 div

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

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

4

6 回答 6

4

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/

于 2012-06-19T07:45:13.490 回答
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');
});​​​
于 2012-06-19T06:56:03.500 回答
1

您可以:hover在 div 上使用，除 IE6 之外的所有浏览器都支持它，目前用户很少*：

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

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

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

*) 0.66% 根据statcounter.com

于 2012-06-19T06:56:52.797 回答
1

您可以使用更改链接颜色

   a:hover{color:#ccc;}

但是您不能使用 css3 或 css 2 从子元素访问父元素。

它已在 css4 中提供，带有 $sign

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

但目前没有浏览器支持它

您必须查看 javascript 才能更改父背景。

于 2012-06-19T06:51:19.090 回答
0

您应该考虑使用 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 得到如此广泛的支持，以至于不支持它的浏览器的百分比可以忽略不计。

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

于 2012-06-19T06:56:50.833 回答
0

要使整个 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>
于 2012-06-19T06:59:23.630 回答