I'm pretty new to css but I've been working with it for the past few days, and this is the first real thing I can't quite figure out.
Jsfiddle here.
What I'm going for is to have .textone/.texttwo show and hide .text when hovering over one of the bottom two buttons. I've tried several things in order to get it to work, from deleting two div classes to leave the only class both the .text elements and .bottombutton as .box. I don't quite know what I'm doing wrong because I've seen other codes similar to this working but I just cannot get this one to function. The only thing I have had luck with is:
.box:hover .text{display:none;}
Which I would really rather not have to do since I do want the individual buttons to work.
I guess the problem is with the relationship of two elements I'm trying to connect, since I have tried all of these:
.buttonbottom:hover .text{display: none;}
.buttonbottom:hover + .text{display: none;}
.buttonbottom:hover ~ .text{display: none;}
.buttonbottom:hover > .text{display: none;}
None of which have worked.
For good measure I also tested out the same idea with the .menu class by sorting it into a list but I've also had no luck there. Any help would be greatly appreciated!
I do want to note that the code is for deviantart, which does have certain limitations (one of the biggest ones is that you can only define classes but not ID elements.)
