Jump to content
kumaukiyo

Showing one div element on hover of another?

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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

 

  • Thanks 1

Share this post


Link to post
Share on other sites
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! 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×