悬停和焦点不适用于移动下拉菜单选项

Posted 2023-05-08

【中文标题】悬停和焦点不适用于移动下拉菜单选项

【英文标题】：Hover and focus not working on mobile dropdown menu options

【发布时间】：2016-03-02 04:55:12

【问题描述】：

在移动设备上，我有一个下拉菜单，其中包含一些选项。当一个人用手机上的拇指“悬停”在上面时，我希望这些链接将颜色变为灰色。正如您在代码中看到的那样，尽管我尝试了几个选项，但我还没有成功。就是这样：

<div class="total">
  <ul class="nav navbar-nav" >
    <li>
      <div class="id"><a style="width:100px" data-toggle="dropdown" href="#"><img src="grey.png"  class="barimage"> <span ></span></a>
        <ul class="dropdown-menu">
         <div class="dropdown">
          <li><p><b><a href="#" class="menunav">Search your friends</a></b>    </p>
          </li>
          <li><p class="menupar"><b><a href="#" class="menunav">My Friends </a></b></p>
          </li>
          <li><p class="menupar"><b><a href="#" class="menunav">My account</a></b></p>
          </li>
          <li><p class="menupar"><b><a href="#" class="menunav">Logout</a></b></p>
          </li>
         </div> 
        </ul>
      </div>
    </li>

这是 CSS：

.dropdown 
margin-top:-3px;
width: 200px;
height:220px;
background-color: rgba(36, 96, 70, 1);
font-size:20px;
line-height:50px;

border-radius: 3px;


.menunav 
width: 200px;
height:80px;
color:green;
font-size:20px;
line-height:50px;
border:solid black;
border-radius:1px; 
 

a:link color:white;
a:visited color:white
a:hover.menunav background-color:grey;
a:active.menunav background-color:grey;
a:focus.menunav background-color:grey; 
a.menunav 
display: block;
height: 100%;
width: 100%;
text-decoration: none;

【参考方案1】：

不太确定为什么要在移动设备上使用悬停效果，但只要使用 :hover 就可以使用 :focus。

【讨论】：

如您所见，我已经在使用焦点，但它不起作用。我希望在单击它们时突出显示选项！

你可能想试试： ...

你也可以考虑这个 JS 库：github.com/ftlabs/fastclick

感谢@jameyson MacDonald，成功了！但是另一个问题开始了：现在，当您将鼠标悬停在链接上时，链接变为蓝色并带有下划线。这实际上很奇怪，我还有一些其他的 javascript 代码，它们的链接在运行时会变成蓝色。你知道如何解决这个问题吗？谢谢！！

你用的是“ontouchstart”还是图书馆？