Jump to content

CSS :hover problem


Recommended Posts

<!DOCTYPE html>
.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;

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


Link to comment
Share on other sites

  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

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

  • Create New...