仅当悬停在 li 中的 span 上时才显示下拉菜单

Posted

技术标签:

【中文标题】仅当悬停在 li 中的 span 上时才显示下拉菜单【英文标题】:Show dropdown menu only when hovered on span in li 【发布时间】:2014-10-15 23:53:41 【问题描述】:

我只想在hoveredli (.$user->user_login.) 的一个单词上显示下拉菜单。 目前我在整个li 上悬停,但我不希望悬停在“你好”上。 当我将鼠标悬停在用户名上时,我必须得到一个下拉菜单。不是当我将鼠标悬停在“你好”上时

这是我的代码:

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

我该怎么做?

提前致谢。

【问题讨论】:

它已经被包裹在&lt;span&gt;中,使用.top_login li a span ... 的样式 你能再读一遍这个问题吗?我已经编辑过了。 @Aasim 能否在您登录后提供 html 结果,如果可以的话,也许可以在小提琴中创建它 【参考方案1】:

像下面这样使用。

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

DEMO

【讨论】:

这不能回答问题【参考方案2】:

您可以使用 Jquery 来做到这一点,请参见下面的代码

$(document).ready(function()
    $('.top_login li a span').hover(function()
        $(".profile_tab").toggle();
        );
);

当您在用户名上hover 时,它将显示menu profile_tab,当光标moves out 时,menuhide,这是使用hovertoggle 功能完成的。

在此处查看示例小提琴:SAMPLE

【讨论】:

以上是关于仅当悬停在 li 中的 span 上时才显示下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

CSS - 将鼠标悬停在 li 元素上时执行转换(下拉菜单)

带有链接的 li 内的 span 标签在悬停时移动

在锚点上触发 jQuery 的 hover() 以显示包含 LI 的下拉菜单?

Reactjs下拉菜单悬停在单词上时不显示

Jquery:当悬停在菜单项上时,显示文本

悬停时链接下的 CSS 三角形(没有 UL/LI/SPAN)?