CSS not working on the left sidebar but on the upper bar
Question
The code given below is working on the upper bar, but it will not work on the left bar.
#one { display: block; background-color: red; } #two { opacity: 0; background-color: green; position: relative; top: -34px; } #two:hover { opacity: 1; }
<html> <head> <link rel="stylesheet" type="text/css" href="hov.css"> </head> <body> <div id="one"> <p>mango</p> </div> <div id="two"> <p>apple</p> </div> </body> </html>
The above code works if the mango is on the top and it will not work when the mango is on the left side.
2 answers
solution1
1 2016-08-12 04:35:32
Where is the sidebar ? there is only two container set to block.
#one { display: block; background-color: red; } #two { opacity: 0; background-color: green; position: relative; top: -34px; } #two:hover { opacity: 1; }
<html> <head> <link rel="stylesheet" type="text/css" href="hov.css"> </head> <body> <div id="one"> <p>mango</p> </div> <div id="two"> <p>apple</p> </div> </body> </html>
solution2
1 ACCPTED 2016-08-12 04:39:00
Are you looking for this ?
#one { width:100px; display: block; background-color: red; } #two { opacity: 0; background-color: green; position: relative; top: -34px; margin-left:100px; } #two:hover { opacity: 1; }
<div id="one"> <p>mango</p> </div> <div id="two"> <p>apple</p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Position left sidebar with CSS
css - left sidebar not on left side
CSS - Sidebar items not aligning to left
Css move Sidebar content to the left
CSS sticky not working in sidebar
Left sidebar with toggle in Bootstrap 3 not working
Simple CSS problem: Title text on upper left, Button on the upper right
CSS layout with top and bottom sections in left sidebar
My right sidebar is not working properly like left sidebar?
Adjusting sidebar and navigation bar positions in CSS
Related Tags