从 PHP 中的 HTML 更改 CSS

Question

I made HTML Elements in php by echoing it; I wanted to change the css of that html, but it didn't work. I was wondering if you could do this?

The PHP

                }  else {

                    include("steamauth/SteamConfig.php");
                    include('steamauth/userInfo.php'); //To access the $steamprofile array
                    //Protected content
                    echo '<div class="dropdown">';
                    echo '<a class="dropdown-toggle" href="#">';
                    echo '<img src="'.$steamprofile['avatar'].'" height="30" style="border-radius: 100%;">';
                    echo '</a>';
                    echo '<div class="dropdown-content">';
                    echo '<a class="logout" href="'.$steamauth['logoutpage'].'"</a>';
                    echo '</div>';                  
                    echo '</div>';
                } 

The CSS

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown-toggle:hover .dropdown-content {
     display: block;
}

.dropdown-toggle:hover .dropbtn {
    background-color: #3e8e41;
}

Answer 1

First of all, you have a syntax error in your HTML:

echo '<a class="logout" href="'.$steamauth['logoutpage'].'"</a>';

Should be

echo '<a class="logout" href="'.$steamauth['logoutpage'].'">Logout</a>';

Your CSS is working fine, it just doesn't do anything because:

For .dropdown-content you use display:none . So the link is hidden.

Also, you are trying to display the dropdown-content by doing this:

.dropdown-toggle:hover .dropdown-content {
    display: block;
}

But dropdown-content is no child of dropdown-toggle so this does nothing. Fix it by changing it to this (also, see this jsfiddle ):

.dropdown-toggle:hover ~ .dropdown-content {
    display: block;
}

However, with this approach you can't click to the link as you won't be hovering dropdown-toggle anymore. Best option is to place dropdown-content inside dropdown-toggle. See this jsfiddle to see that in action.

The only other CSS that is not about .dropdown-content is .dropdown-toggle:hover .dropbtn , but there is no element with class dropbtn..