PoBratsky Posted August 21, 2017 Share Posted August 21, 2017 <!DOCTYPE html> <html> <head> <style> .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .opa:hover { opacity: 0.3; } /* why not work? Thanks */ .dropdown-content:hover .opa { opacity: 0.3; } .desc { padding: 15px; text-align: center; } </style> </head> <body> <h2>Dropdown Image</h2> <p>Move the mouse over the image below to open the dropdown content.</p> <div class="dropdown"> <img class="opa" src="img_fjords.jpg" alt="Trolltunga Norway" width="100" height="50"> <div class="dropdown-content"> <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> <div class="desc">Beautiful Trolltunga, Norway</div> </div> </div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2017 Share Posted August 21, 2017 The space between '.dropdown-content:hover' and '.opa' means it will be referring to child element, in other word a element within '.dropdown-content' container element with class 'opa', NO element such as this exists. The only element that has this class is a sibling img element of '.dropdown-content' placed above it, which you can't access, because you can only cascade down, not up. 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