kumaukiyo Posted January 13, 2018 Share Posted January 13, 2018 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.) Link to comment Share on other sites More sharing options...
dsonesuk Posted January 13, 2018 Share Posted January 13, 2018 You can't do that! As Cascading in Cascading Style Sheet (css) means it cascades down from parent to children or sibling to below sibling elements. it never goes up. Only with JS can that be done; The space between ':hover .text' means the element with class 'text' must be within element div with class 'buttonbottom' to cascade down to .buttonbottom:hover .text{display: none;} You can place these above .text element, adding padding-bottom:, and position: relative; to bottom of box class element to allow space for these elements, then add position: absolute; and bottom: property to these bottom buttons. this will position them to where they are now, even though they are above .test class element. Then use .buttonbottom:hover ~ .text{display: none;} 1 Link to comment Share on other sites More sharing options...
kumaukiyo Posted January 13, 2018 Author Share Posted January 13, 2018 10 hours ago, dsonesuk said: You can't do that! As Cascading in Cascading Style Sheet (css) means it cascades down from parent to children or sibling to below sibling elements. it never goes up. Only with JS can that be done; The space between ':hover .text' means the element with class 'text' must be within element div with class 'buttonbottom' to cascade down to .buttonbottom:hover .text{display: none;} You can place these above .text element, adding padding-bottom:, and position: relative; to bottom of box class element to allow space for these elements, then add position: absolute; and bottom: property to these bottom buttons. this will position them to where they are now, even though they are above .test class element. Then use .buttonbottom:hover ~ .text{display: none;} Thank you for your help!! I'm glad that the problem was as little as that. Thank you so much! Link to comment Share on other sites More sharing options...
ScriptShow Posted January 14, 2018 Share Posted January 14, 2018 Hello, <!DOCTYPE html> <html> <style> div#content {display: none} button:hover + div#content {display: block} </style> <button>HOVER</button> <div id="content"> And the content will show . . . </div> </html> Something simple. Link to comment Share on other sites More sharing options...
dlgalasso Posted January 18, 2018 Share Posted January 18, 2018 try visibility:hidden on text Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now