0

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

      <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 吗？我的问题缺乏研究，对此感到抱歉。

4

2 回答 2

1

将你的 CSS 更改为

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

>

运算符直接子元素。并且无法选择父母。更好地使用类来找出

于 2013-10-31T07:27:38.337 回答
1

CSS3 不能定位元素的父元素。这是类似问题的更多详细信息https://stackoverflow.com/a/1014958/2895892

于 2013-10-31T07:25:35.340 回答