我只想在 悬停
在 li (.$user->user_login.)
上的一个词上时显示下拉菜单。
目前我将鼠标悬停在整个 li
上,但我不想将鼠标悬停在“hello”上。
当我将鼠标悬停在用户名上时,我必须得到一个下拉菜单。当我将鼠标悬停在“你好”上时不是
这是我的代码:
<ul class="top_login">
<li><a href="<?php echo wp_logout_url( site_url() ); ?>" title="Logout">Logout</a></li>
<li><a style="color: #20dae6;"> <?php $user=wp_get_current_user(); echo "Hello <span style='color:#464646'>".$user->user_login."</span>"; ?> </a>
<ul class="profile_tab">
<li><a href="<?php echo site_url(); ?>register-profile/">Edit Profile</a></li>
<li><a href="<?php echo site_url(); ?>/manage-bookings/">Manage Subscriptions</a></li>
</ul>
</li>
</ul>
这是我的css:
ul.top_login li {float:right;text-align:right;width:auto;position:relative;margin:0 5px;}
ul.top_login li a {color:#20dae6;font-weight:600;text-transform:uppercase;cursor:pointer;}
/*SUB MENU*/
ul.profile_tab {background:#00777F;left:0;position:absolute;text-align:left;width:200px;z-index:999;display:block;}
ul.profile_tab li {height:22px;line-height:20px;display:block;float:left;text-align:left;margin:0;}
ul.top_login ul {display:none;}
ul.top_login li:hover ul {display:block;}
这是我们得到的呈现的 HTML:
<ul class="top_login">
<li>
<a title="Logout" href="http://localhost/iseasserver/wp-login.php?action=logout&redirect_to=http%3A%2F%2Flocalhost%2Fiseasserver&_wpnonce=2846506c7c">Logout</a>
</li>
<li>
<a style="color: #20dae6;">
Hello
<span style="color:#464646">admin</span>
</a>
<ul class="profile_tab">
<li>
<a href="http://localhost/iseasserver/pie-register-profile/">Edit Profile</a>
</li>
<li>
<a href="http://localhost/iseasserver/manage-bookings/">Manage Subscriptions</a>
</li>
</ul>
</li>
</ul>
我该怎么做?
提前致谢。
最佳答案
像下面这样使用。
.top_login li a:hover span {color:blue;}
编辑:
根据您的新要求,您只需要使用 jQuery 即可获得良好的结果。等等,我只能用 CSS 给出答案。但它很丑。如果您没问题,请尝试以下操作。
在 CSS 中,你需要从
ul.top_login li:hover ul {display:block;}
为此
ul.top_login li span:hover ul {display:block;}
您需要像下面这样更改您的 HTML 结构。
<ul class="top_login">
<li><a href="<?php echo wp_logout_url( site_url() ); ?>" title="Logout">Logout</a> </li>
<li><a style="color: #20dae6;"> <?php $user=wp_get_current_user(); echo "Hello <span style='color:#464646'>".$user->user_login.?>
<ul class="profile_tab">
<li><a href="<?php echo site_url(); ?>register-profile/">Edit Profile</a></li>
<li><a href="<?php echo site_url(); ?>/manage-bookings/">Manage Subscriptions</a></li>
</ul>
</span></a>
</li>
</ul>
关于jquery - 仅当悬停在 li 中的 span 上时才显示下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25441728/