Question

我想创建这个圆形的facebook按钮，在悬停时交换颜色。但是我无法使用＆gt;更改子元素。但我甚至不确定我做得对。这是我的代码

      <div class="alignright" id="facebook-round">
         <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css"         rel="stylesheet" />
         <a class="facebook-round" style="color: rgba(44, 33, 33, 1);" href="https://www.facebook.com/pages/Mio-Natural/613852868659014">
              &nbsp;&nbsp;&nbsp;<i class="fa fa-facebook fa-3x"></i>
         </a>
      </div>

我制作的CSS就是这个

#facebook-round {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
background: #807D7D;
}

#facebook-round i{
margin-top: 0.22em;
margin-left: 0.12em;
color:rgba(44, 33, 33, 1);
}   

#facebook-round:hover {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
background: rgba(44, 33, 33, 1);
}   
.facebook-round {
  text-decoration:none;
}
#facebook-round:hover >i {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
color: #807D7D;
}

这是一个小提琴http://jsfiddle.net/D8ZKf/ 我想知道的另一件事是，是否可以基于子元素来定位父元素，这意味着如果我具有父元素的特定属性，则仅当子元素存在时才应用。我可以使用Javascript来做到这一点但是可以使用纯CSS吗？我的问题缺乏研究，抱歉。

Answer 1

将你的css改为

#facebook-round:hover i {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
color: red;
}     

>

operator immediate子元素。选择父母是不可能的。更好地使用课程来找出

Answer 2

CSS3无法定位元素的父级。以下是类似问题https://stackoverflow.com/a/1014958/2895892

中的更多详细信息

在悬停时更改属性

2 个答案: