0

I'd like to change the color of the parent div#social when hovering on the social network links (facebook, twitter, etc.):

<div class="col-sm-4" id="social">
  <a id="facebook" href="#"> <span>Facebook</span></a><br>
  <a id="twitter" href="#"> <span>Twitter</span></a><br>
  <a id="google-plus" href="#"> <span>Google plus</span></a><br>
  <a id="instagram" href="#"> <span>Instagram</span></a><br>
</div>

This is the example

Vucko
  • 18,882
  • 6
  • 54
  • 97
Antonio Carbone
  • 95
  • 3
  • 12
  • Pls, reopen this Q., because I've got a solution for this specific issue. – Banzay Feb 14 '17 at 12:37
  • 1
    @banzay with CSS only? You'll have to explain it before someone reopens it, because it's widely known that there's no selector to reach a parent/ancestor node – Juan Mendes Feb 14 '17 at 12:41
  • yes. I've got a simple trick – Banzay Feb 14 '17 at 12:41
  • 1
    Here is a solution: http://www.codeply.com/go/gvLumhaKhT – Banzay Feb 14 '17 at 12:49
  • I think that a subject isn't quite correct. Author just needs to change background color only. Surely, if we talk about e.g. dimensions of parent, then this is impossible to change for parent element, but trick with a "pad" between parent and children is a good way to solve _this_ issue. So, the right subject, I think, should sound like "Change background color of parent element when hovering over child elements" – Banzay Feb 14 '17 at 13:01
  • @Banzay I reverted the OP subject. The main issue here is how to style the parent element, which really is a duplicate. However, you provided an answer which works, which is a _hack_ for this specific issue. – Vucko Feb 14 '17 at 13:05
  • @Vucko Surely, if we left the subject as is, a solution will mislead the huge number of people and will give confidence in the false statement. So my proposal is to change subject and the question since often people do not know what they want. – Banzay Feb 14 '17 at 13:15
  • @JuanMendes pls, have a look at solution – Banzay Feb 14 '17 at 13:19
  • @Banzai It is an interesting/clever solution, but it doesn't really change the parent's background color. I suggest you create your own post asking for any kind of solution, with wording that would match your answer, then people will be able to find your solution. You can link to that from here. I think it may become a really popular question/answer because it is pretty nifty. I will surely vote up the answer. – Juan Mendes Feb 14 '17 at 13:58
  • Men, Thanks a lot for your time and concern! – Banzay Feb 14 '17 at 14:05
  • @Banzai Please post a link here once you create it so I can upvote it. My suggestion for the question is: "Workaround for CSS limitations on selecting parent elements" – Juan Mendes Feb 14 '17 at 14:39
  • @Banzay : Great ! It is what I wanted. It works great and is easy. – Antonio Carbone Feb 14 '17 at 16:38
  • @JuanMendes https://stackoverflow.com/questions/42232997/how-to-make-background-color-of-anchor-on-hover-to-fill-whole-parent-with-css/42232998#42232998 – Banzay Feb 14 '17 at 18:30

0 Answers0