我在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的元素。。