Changing properties on hover

Question

I want to create this round facebook button that interchanges color on hover. But I have not been able to change the child element using the > but I'm not even sure I am doing it right. here is my code

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

The css I made is this

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

here is a fiddle http://jsfiddle.net/D8ZKf/ Another thing I want to know is if it is possible to target a parent based on the child element meaning if I have a particular property for a parent element should be applied only if the child element exists. I can do this using Javascript but is it possible using plain CSS ? My questions lack research, sorry about it.

Do you want like this? http://jsfiddle.net/D8ZKf/1/ – Mr_Green Oct 31 '13 at 07:25 — Mr_Green, Oct 31 '13 at 07:25
Thanks, not exactly the same but I got the idea – Bazinga777 Oct 31 '13 at 07:30 — Bazinga777, Oct 31 '13 at 07:30

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

CSS3 can't target the parent of an element. Here is more details in similar question https://stackoverflow.com/a/1014958/2895892

edited May 23 '17 at 12:28

Community

1
1

answered Oct 31 '13 at 07:25

score 1 · Accepted Answer · answered Oct 31 '13 at 07:27

1

Change ur css to

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

>

operator immediate child element. And selecting parent is not possible . better use class to find out

answered Oct 31 '13 at 07:27

lopa

474
1
3
14

Changing properties on hover

2 Answers2