将CSS从HTML更改为';s在PHP中


Changing CSS from HTML that's in PHP

我在php中通过回显HTML元素;我想更改那个html的css,但没有成功。我想知道你能不能这样做?

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

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

首先,您的HTML:中存在语法错误

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

应该是

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

你的CSS运行良好,只是什么都不做,因为:

对于.dropdown-content,使用display:none。所以链接是隐藏的。

此外,您正试图通过以下操作显示下拉内容:

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

但是下拉内容并不是下拉切换的子项,所以这并没有什么作用。通过将其更改为这个来修复它(也可以参见这个jsfiddle):

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

然而,使用这种方法,您无法单击链接,因为您将不再使用悬停下拉切换。最好的选择是将下拉内容放在下拉切换中。看看这个jsfiddle,看看它在起作用。

唯一一个与.dropdown-content无关的CSS是.dropdown-toggle:hover .dropbtn,但没有类为dropbtn的元素。。